Javascript：当它到达带有jquery的浏览器的顶部边缘时，让div始终保持在顶部答案

【问题标题】：Javascript: have div always remain at the top when it reaches the top edge of browser with jqueryJavascript：当它到达带有jquery的浏览器的顶部边缘时，让div始终保持在顶部
【发布时间】：2010-08-23 12:17:17
【问题描述】：

如何让 div 始终停留在屏幕上？可以说我在左侧站点有一个 div。当浏览器滚动到底部时，只有当它的顶部到达浏览器屏幕的顶部边缘时，div 才会保留在那里，这样它就不会被隐藏。我也在使用jquery。

谢谢。

【问题讨论】：

标签： javascript jquery jquery-ui html

【解决方案1】：

这是 RemySharp 关于这个问题的一个很好的截屏视频

http://jqueryfordesigners.com/fixed-floating-elements/

演示页面：

http://static.jqueryfordesigners.com/demo/fixedfloat.html

【讨论】：

【解决方案2】：

您需要在window 上调用.scrollTop()，并将其与DIV 中的offset top value 进行比较。

$(window).bind('scroll', function(e){
    var $div = $('.top').
        sTop = $(window).scrollTop();

    if($div.offset().top <= sTop)
        $div.css('top', sTop);
    else
        $div.css('top', '100px');
});

而在本例中，.top 是应该留在顶部的元素。

示例：http://www.jsfiddle.net/2C6fB/8/

【讨论】：

我认为将其设置为 position: fixed 比不断更改 top 值更好 - 不断更改值可能会滞后并导致闪烁和其他视觉异常
不，我的意思是在它到达 Javascript 的顶部边缘后将其设置为该值，而不是不断更新该值，并将其设置为在用户滚动后滚动更改，就像在此页面上一样blackestate.co.nz
我同意 Yi，当 scrollTop 比 x 更多（或 eq.）时，将 position 更改为 fixed 会更好。否则返回absolute。（也许你还必须在修复时将top 从 100 切换到 0，这取决于所需的效果）。请注意：IE6 不支持固定定位。

【解决方案3】：

如果您希望它始终保持在同一个地方，您可以使用 css 属性 position: fixed; 否则您可以使用 $(window).scroll() 和 .scrollTop(); 的组合来检测您的 div 相对于屏幕的位置并应用正确的定位。

【讨论】：

【解决方案4】：

/* PlugTrade.com - Sticky Top jQuery Plugin */
jQuery.fn.sticky_top = function () {
    /* check for our hidden div.. create it if it doesn't exist */
    if (!this.find("#sticky_top").length > 0)
        this.append("<div id='sticky_top' style='display:none'>"+this.css('top')+"</div>");

    var thisdiv = this;

    $(window).bind('scroll', function(e){
        var initval = thisdiv.find("#sticky_top").text();
        var wintop = $(window).scrollTop();
        var boxtop = initval.replace(/px/i, "");

        if(wintop >= boxtop)
        {
            if ( $.browser.msie ) 
            {
                thisdiv.css('top', wintop+'px');
            } else {
                thisdiv.css('position', 'fixed');
                thisdiv.css('top', '0');
            }
            // console.log(boxtop+':'+wintop);
            /* thisdiv.css('top', wintop+'px'); */
        }
        else
        {
            thisdiv.css('position', 'absolute');
            thisdiv.css('top', initval);
        }
    });
}

你可以这样使用：

$('#div1').sticky_top();

【讨论】：

【解决方案5】：

保留您的 div position: fixed;

【讨论】：