使用 jQuery 创建页脚和子页脚的想法？

Question

大家好，提前感谢您的任何指导。

这就是我想要做的。我有一个固定位置的 div (#div_1)，它位于长页面的底部，是页面页脚......直到用户一直滚动到底部......然后应该出现一个子页脚 (#div_2) #div_1 正下方。我四处寻找，找不到我需要的解决方案。

再次感谢任何帮助。

Answer 1

想通了。我只是将#div_2 隐藏在#div_1 后面，直到用户到达页面底部，然后将#div_1 的底部向上移动x 个像素以显示子页脚（#div_2）

CSS

#div_2{width:100%;height:50px; background:green;position:fixed;bottom:0; z-index:1}
#div_1{width:100%;height:95px; background:red; position:fixed; bottom:0; z-index:2}

jQuery

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
       $("#div_1").css('bottom','50px');
   }else{
       $("#div_1").css('bottom','0');
   }
});

Answer 2

这应该处理多余的 dom 事件： 如果您想了解更多关于这些问题的信息，请点击此处http://ejohn.org/blog/learning-from-twitter

function footer() {
    //do this in case you already are at the bottom and miss the event
    showfooter();
    $(window).one('scroll', function() {
        showfooter()
        setTimeout(showfooter, 200);
    });
}
function showfooter() {
    if($(window).scrollTop() + $(window).height() == $(document).height()) {
         $('#div_2').fadeIn();
    }
}

Answer 3

当用户滚动到页面底部时，您可以隐藏#div_2 和fadeIn() 或show()。使用follow函数检测用户是否滚动到底部：

$(window).on('scroll', function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
       $('#div_2').fadeIn();
   } else {
      //code
  }
});