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

时间:2011-08-10 15:26:03

标签: javascript jquery css

我正在寻找一种方法,只有在向下滚动约170个像素后,才能将页面的#header元素定位为“已修复”。

标题上方是横幅,所以当人们向下滚动时,我希望横幅滚动,标题在点击窗口顶部时保持固定,页面内容在标题下方滚动。< / p>

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

5 个答案:

答案 0 :(得分:12)

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

答案 1 :(得分:1)

您需要检查不同的滚动位置:

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/

答案 2 :(得分:1)

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

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

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

答案 3 :(得分:1)

这是一个jquery插件的演示,负责处理这个问题。类似于John的上述答案,但该插件使解决方案更进一步。

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

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

用法:

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

答案 4 :(得分:0)

我认为这应该有效:http://jsfiddle.net/Skooljester/K2mFT/。但是,您需要在标题上定义宽度,否则当它变得固定时它会缩小。