Question

我看到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，只是FYI）为什么？

Answer 1

这可以完全基于带有Flexbox的CSS完成。您可以使用任何容器而不是body。我仅使用body作为示例。

如果你想让它变得非常粘，并粘在窗户的底部，只需添加：

footer
{
    position: sticky;
    bottom: 0;
}

＆＃13;

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;
}

＆＃13;

<main>
Hey it's main content here
</main>
<footer>
Look I'm sticky!
</footer>

＆＃13;

Answer 2

它确实有用..确保在html标签方面使页面正确，例如有＆＃34;＆＃34;在页面顶部...

使用jquery的粘窗口页脚

2 个答案: