帶有標頭的視差滾動

Question

在此先感謝您的任何建議。 我正在嘗試建立一個使用基本視差滾動元素的網站。 基本上，標題位於頁面頂部的60％。 當用戶滾動時，標題下的內容會追上標題並在標題下流動。

我可以使所有這些功能都能正常運行，但是我也希望頁眉到達頁面頂部時，它可以保持在頁面頂部。 我已經完成了一些工作，但是當標頭卡住時，它非常浮華/跳躍。 我見過其他人也遇到類似的問題，他們似乎源於將標頭位置從靜態切換為固定，但是在我的布局中，標頭始終是固定的，因此我有些困惑。 也許我使用的定位有點奇怪，但是經過大量的實驗，這是我能得到的最接近的位置。

這是一個JSFiddle，以及代碼：

http://jsfiddle.net/kromoser/Lq7C6/11/

JQuery的：

$(window).scroll(function() {
    var scrolled = $(window).scrollTop();
    if (scrolled > $('#header').offset().top) {
        $('#header').css('top','-60%');
     }
    else {
        $('#header').css('top',(0-(scrolled*0.6))+'px');
     }
});

CSS：

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
#header {
  position: fixed;
  top: 0;
  margin-top: 60%;
  z-index: 3;
  background: #FFF;
  width: 100%;
}
#content {
  min-height: 100%;
  position: relative;
  top: 100%;
}

HTML：

<div id="header">This header should stick to top when scrolled.</div>
<div id="content">Content goes here</div>

謝謝你的幫助！

Answer 1

我嘗試了這個，我認為這應該對您來說有些麻煩。

將標題更改為position:absolute;

在document.ready中，將標頭的初始位置保留在Var中（以檢測在滾動頂部時標頭何時應保持其位置）：

var initialPos =  $('#header').offset().top;

並添加以下jquery以檢測滾動位置：

if( scrolled > initialPos){
        $('#header').css({
           position:"fixed",
           top:'0px'
        });
    }else{

        $('#header').css({
            position:"absolute",
            top:initialPos+"px"
        });
    }

小提琴

Answer 2

這是由於滾動功能導致的，因為每次滾動時（用戶每次滾動），css都會將css應用於標題。 應用后，它將在if語句中的2個值之間不斷跳轉。

我認為，執行此操作的更好方法是，一旦在標題中將一個類應用於頂部，然后在CSS中對該類進行樣式設置。 然后，即使多次應用addClass（），css也不會導致其跳轉。

if( scrolled > $('#header').offset().top){
    $('#header').addClass('top');
}

.top {
  top: 60px; // or whatever amount you want it to stay when it is done moving
}

Answer 3

“ Scrollorama”插件處理得很好！ 在此處查看“固定”和“視差”部分： http : //johnpolacek.github.io/scrollorama/ 。 就個人而言，當我嘗試創建平穩過渡時，我發現使用這些插件而不是自己編寫它們是最好的運氣。

要研究的另一件事是Stellar.js。 極其易於使用，而且如果您可以使用背景位置過渡而不是元素過渡，那么它會更加平滑且不易跳動。 Stellar.js和Scrollorama可以完美地協作。

http://markdalgleish.com/projects/stellar.js/