使用jquery的粘性窗口页脚
使用jquery的粘性窗口页脚
提问于 2017-12-22 06:27:10
我看到了一个solution (在评论from Luco中有一个屏幕重写修复)，它可以做我想要的事情。但不管怎样，下面是固定的(经过测试的)代码：
// Window load event used just in case window height is dependent upon images
$(window).bind("load", function() {
var footerHeight = 0,
footerTop = 0,
$footer = $("#footer");
positionFooter();
function positionFooter() {
footerHeight = $footer.outerHeight(); // include padding/margins
footerTop = ($(window).scrollTop() + $(window).height() - footerHeight) + "px";
if (($(document.body).height() + footerHeight) < $(window).height()) {
$footer.css({
position: "absolute",
top: $footer.offset().top // include padding/margins
}).stop().
animate({
top: footerTop
},-1);
} else {
$footer.css({
position: "static"
});
}
}
$(window)
.scroll(positionFooter)
.resize(positionFooter)
});。。当我使用jquery版本1.3.2时，它可以工作。但是，我想使用版本1.12.4..但是当我这样做的时候，它就坏了。(它也使用bootstrap，仅供参考)为什么？
回答 2
Stack Overflow用户
发布于 2017-12-22 06:53:39
这可以通过Flexbox单独在CSS上完成。您可以使用任何容器而不是body。我使用body只是为了举例说明。
如果你想让它非常粘性并且粘在你的窗口底部，只需添加：
footer
{
position: sticky;
bottom: 0;
}
body
{
/* Set minimum height to 100% of our viewport height */
min-height: 100vh;
/* Enable flexbox for the container */
display: flex;
/* Set flexbox layout to column */
flex-direction: column;
/* Center items on the flex axis */
align-items: center;
margin: 0;
}
footer
{
/* Add infinite margin from top */
margin-top: auto;
}<main>
Hey it's main content here
</main>
<footer>
Look I'm sticky!
</footer>
Stack Overflow用户
发布于 2017-12-23 05:19:15
它确实起作用了。确保页面在html标签方面是正确的，比如在页面顶部有"“……
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47933544
复制相关文章
相似问题
腾讯云开发者
