logo标签列表

将div固定在浏览器窗口底部

javascriptjqueryhtmlcss
14

我有一个 div，希望它粘在浏览器窗口底部（实际是浏览器窗口而非页面）。即使用户滚动屏幕，该 div 也需要保持在浏览器窗口底部。

目前，该 div 在第一次滚动时会粘在窗口底部，但每次进行新的滚动时，它都不会重新定位。以下是我的 jQuery 代码：

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

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

3
默认情况下可以使用CSS解决的事情，不应该使用jQuery或JavaScript。 - Cayce K
7个回答
36

这可以通过CSS轻松实现。删除所有JavaScript，并执行以下操作：

position: fixed;
bottom: 77px;

Fiddle

2
哇，那个疏忽真尴尬！哈哈，感谢帮助。 - user715564
有时候我们太专注于使用高级技术，而忘记了已经存在的基本技巧。 - Rohit Kumar
这也是我一直在使用的，但在移动设备上向上和向下滚动时会出现问题。 - Jerry Dodge
根据情况，使用 position: sticky; 可能会产生更好的效果。 - cjbarth
6

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

但是如果你必须使用jQuery解决方案，请将代码更改为以下内容

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

该代码会考虑你滚动的距离，并相应地设置div的位置。

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

请看以下内容：

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

3
3
3
这正是position:fixed的设计初衷：
#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

这是代码演示链接：http://jsfiddle.net/uw8f9/。
1
目前在HTML中实现粘性页脚的最佳解决方案。需要使用width:100%才能使其正常工作。 - zookastos
1

请检查下面的链接是否适用于您。

Fiddle

#footer {
position: fixed;
bottom: 0;
height: 77px;
width: 100%;
background-color: #333;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接