滚动通过一定数量的像素时固定位置答案

【问题标题】：Position fixed when scrolled passed certain amount of pixels滚动通过一定数量的像素时固定位置
【发布时间】：2011-08-30 11:22:22
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript jquery css

【解决方案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");
    }
});

【讨论】：

【解决方案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/

【讨论】：

这在您滚动回页面顶部时不起作用，它保持不变。
我对上面的内容进行了分叉并对其进行了一些调整，这样如果您再次向上滚动，横幅就会重新出现：jsfiddle.net/jethrolarson/zEDMv/18
jsfiddle.net 上的两个链接都不起作用。你能编辑一下吗？

【解决方案3】：

Here 是一个稍微简洁的版本：

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

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

【讨论】：

【解决方案4】：

这是一个处理此问题的 jquery 插件的演示。与上面 John 的回答类似，但该插件使解决方案更进一步。

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

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

用法：

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

【讨论】：

不错！一直在找这样的东西

【解决方案5】：

我认为这应该可行：http://jsfiddle.net/Skooljester/K2mFT/。但是，您需要在标题上定义一个宽度，否则它会在固定后缩小。

【讨论】：