javascript - 滚动经过一定数量的像素时位置固定

Question

我正在寻找一种方法，仅在向下滚动大约 170 像素后才将页面的 #header 元素定位为“固定”。

标题上方是一个横幅，所以当人们向下滚动时，我希望横幅滚开，标题在到达窗口顶部时保持固定，页面内容滚动到标题下方。

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");
    }
});