Question

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

所以这就是我想要做的事情。我有一个固定的位置div（＃div_1），位于一个长页面的底部，是页面页脚...直到用户一直滚动到底部...然后是一个子页脚（#div_2））应该出现在＃div_1的正下方。我已经四处搜索，无法找到我需要的解决方案。

再次，任何帮助表示赞赏。

Answer 1

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

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

Answer 2

想出来。我只是将#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 3

这应该照顾多余的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();
    }
}

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

3 个答案: