固定滾動時通過一定數量的像素的位置

Question

我正在尋找一種方法來將頁面的#header元素定位爲「固定」後才向下滾動約170個像素。

標題上方是一個橫幅，所以當人們向下滾動時，我希望橫幅滾動，當標題碰到窗口頂部時保持固定，頁眉內容在標題下滾動。

http://jsfiddle.net/tdskate/zEDMv/

Answer 1

This是，雖然你可能要捏造與周圍的CSS位的總體思路。

var header = $("#header"); 
$(document).scroll(function(e) { 
    if($(this).scrollTop() > $("#banner").height()) { 
     header.css({"position" : "fixed", "top" : "0"}); 
    } else { 
     header.css("position", "relative"); 
    } 
}); 

Answer 2

您需要檢查不同的滾動位置：

var $header = $('#header'), 
    headerPos = $header.position().top, 
    $win = $(window); 

$win.scroll(function() { 

    if ($win.scrollTop() >= headerPos) { 

     $header.css({ 
      'position':'fixed', 
      'top':0, 
      'width': '100%' 
     }); 

    } 

    if ($win.scrollTop() <= headerPos) { 

     $header.css({ 
      'position': 'static' 
     }); 

    } 

}); 

http://jsfiddle.net/DOSBeats/zEDMv/10/

Answer 3

我認爲這應該工作：http://jsfiddle.net/Skooljester/K2mFT/。但是，您需要在標題上定義一個寬度，否則它會在收縮時收縮。

Answer 4

Here的一個稍微更簡潔的版本：

var header = $('#header'), 
    bannerHeight = $('#banner').height(), 
    win = $(window); 

win.scroll(function() { 
    header.css({ top: Math.max(Number(win.scrollTop() - bannerHeight), 0) }); 
}); 

Answer 5

這裏是一個jQuery插件，完成這個功能的演示。與John的回答類似，但該插件將解決方案稍微做了一些。

演示：http://jsfiddle.net/ZczEt/

插件和來源：https://github.com/bigspotteddog/ScrollToFixed

用法：

$(document).ready(function() { 
    $('.header').scrollToFixed(); 
});