将div粘贴到浏览器窗口的底部

Question

我有一个div,我想坚持浏览器窗口的底部(实际的浏览器窗口不是页面).当用户滚动时,div需要保持在浏览器窗口的底部.

现在,div将在第一个初始滚动时粘在窗口的底部,但每次有新的滚动时它都不会重新定位.这是我对jQuery的看法:

$(window).scroll(function () { 
    var bHeight = $(window).height();
    $('.test').css({
        top: bHeight - 77 + 'px'
    });
});

这是一个jsfiddle http://jsfiddle.net/3ecx7zp9/1/

Answer 1

这可以简单地在CSS中完成.删除所有JavaScript,然后执行以下操作:

position: fixed;
bottom: 77px;

小提琴

Answer 2

您是否考虑过使用固定位置的 div？设置position: fixed和bottom: 77px

但是，如果您必须使用 jQuery 解决方案，请将代码更改为此

$(window).scroll(function () { 
    var bHeight = $(window).height();
    var offset = $(window).scrollTop();
    $('.test').css({
        top: bHeight + offset - 77 + 'px'
    });
});

http://jsfiddle.net/3ecx7zp9/6/

这考虑到您滚动了多远，并将相应地设置 div 的位置

Answer 3

干得好：

 <div class="test" style="position: fixed; width: 100%; height: 77px; background-color: #333;left:0;bottom:0"></div>