帶粘頭的視差滾動

在此先感謝您的任何建議。我試圖建立一個使用基本視差滾動元素的網站。基本上，頁眉位於頁面頂部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>

感謝您的幫助！

來源

2013-10-21 Kevin

因爲你是滾動函數而引起的，每次調用時都會將css應用到頭部，這是用戶每次滾動時的情況。當它被應用時，它會不斷在if語句中的兩個值之間跳躍。

我認爲一個更好的方法來執行此操作將是通過應用一個類頭，一旦它在頂部的位置和樣式在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 
}

來源

2013-10-21 15:20:32 DMTintner

啊，這個工作基本上我是多麼的需要，但一個奇怪的事情發生了。當我慢慢滾動時，它效果很好。但是當我滾動速度非常快時，標題有時會滾動頁面頂部。不是一個真正的交易破壞者，只是一個奇怪的怪癖。任何想法爲什麼會發生？ – Kevin

「Scrollorama」插件處理得非常好！請看這裏的「Pin it」和「Parallax」部分：http://johnpolacek.github.io/scrollorama/。就我個人而言，當我嘗試創建一個平穩的過渡時，我發現使用這些插件的最好運氣，而不是自己寫這些插件。

另一個需要研究的事情是Stellar.js。非常容易使用，如果你可以使用背景位置轉換而不是元素轉換，它會更平滑和更少跳動。 Stellar.js和Scrollorama一起合作精美。

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

來源

2013-10-21 15:22:36

我嘗試這樣做，我認爲這應該是服用點你。

更改標題爲position:absolute;

在文檔中。準備就緒後，保持在一個VAR你的頭的初始位置（以檢測當標題應該保持自己的位置，而滾動頂部）：

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

並添加此以下jQuery來檢測滾動位置：

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

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

FIDDLE

來源

2013-10-21 15:25:12 EdenSource

如果仔細觀察，標題欄不會比周圍慢或更快：/ –

帶粘頭的視差滾動

回答

相關問題