Question

当用户位于页面的最底部时，是否可以扩展div？

我希望有一个固定的展开页脚，当用户滚动到最底部时，它会将页脚高度的默认值从5px设置为110px，并显示更多信息...

对于像这样的东西我看起来很高，但是我似乎无法找到任何有用的教程或论坛来帮助我实现我的目标...

这是我的HTML：

<div class="footer">
         &#169 2016 <a href="http://www.nerdtweak.com/">Nerdtweak.com</a> and <a href="http://www.yoieyo.com/">Yoieyo.com</a>
</div>

如果有人能帮助我实现这一目标，那就太好了！最好是在jQuery中。

谢谢：）

Answer 1

您可以检测到您位于页面的最底部，并设置footer的高度，如下所示。

$(window).scroll(function() {
    if($(window).scrollTop() + $(window).height() == $(document).height()) {
       //set your height here.
       $(".footer").height(110);
    } else {
       $(".footer").height(5);
    }
});

Answer 2

是的，你可以这样做：

$(window).scrollTop() + window.innerHeight == $(document).innerHeight();

有这个：

$(function () {
  $(window).scroll(function () {
    if ($(window).scrollTop() + window.innerHeight == $(document).innerHeight()) {
      console.log("Expand Div");
      $("footer").addClass("expanded");
    } else {
      console.log("Contract Div");
      $("footer").removeClass("expanded");
    }
  });
});

请参阅控制台：http://jsbin.com/cinisagela/edit?js,console,output

在页面底部jQuery展开DIV

2 个答案: