alvarotrigo / alvarotrigo/fullPage.js

Offset Top

オープン
#2,785 コメント 3 件 リアクション 0 件 担当者 0 名 GitHub で見る
enhancement
主要言語
JavaScript
スター
35.4k
フォーク
7.1k
PR マージ指標
30日以内にマージされた PR はありません

説明

I'm using the fullpage.js plugin for a website I'm building. All is good, and and after some tweaking in HMTL and CSS the plugin works how I want it to work. But, I've ran into a small problem I can't fix.

I'm running the slider in a container with a 100px header above. So the height of the #fullpage container/wrapper is always [the browser height] - 100px. With this the first problem occurred. The height of the slides were set to the browsers height instead of the container (for example the browsers height is 700px, and therefor my slides are, but the container is 600px). I've managed to fix this by overwriting the height of the slides, like this:

```
fp.section {
height: 100% !important;
}
```
I know it's dirty, but hey, it works. Until I added a hover effect on the container, which scales it by scale3d(1.015, 1015, 1015). This causes the container to scale, and mess up the scroll distance.

Long question in short: can I somehow set the code, so the scroll distance (transform: translate3d) to be 'fixed' (= [browserheight] - 100px)?

I'm calling the plugin by the following code with the following:

```
jQuery('#fullpage').fullpage({
navigation: false,
easing: 'easeInOutQuart',
css3: true,
easingcss3: 'cubic-bezier(0.77, 0, 0.175, 1)',
scrollingSpeed: 800,
fitToSection: false,
verticalCentered:false
});
});
```
Many many thanks!

コントリビューションガイド

コントリビューションガイドを開く

評価

この issue はまだ評価されていません。

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。