Question

如何让div一直留在屏幕上？让我们说我在左手网站有一个div。当浏览器滚动到底部时，div将仅在其顶部到达浏览器屏幕的上边缘时保持在那里，以便它不会被隐藏。我也在使用jquery。

谢谢。

Answer 1

这是一个关于这个问题的好的ScreenCast RemySharp

<强> http://jqueryfordesigners.com/fixed-floating-elements/

演示页：

<强> http://static.jqueryfordesigners.com/demo/fixedfloat.html

Answer 2

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

DIV

在这个例子中，$(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'); });是应该保持在最顶层的元素。

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

Answer 3

保持你的div position: fixed;

Answer 4

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

Answer 5

/* 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();

Javascript：当div使用jquery到达浏览器的上边缘时，div始终保持在顶部

5 个答案: