javascript - 修复了 DIV 容器通过到达页面的页脚部分来停止浮动

Question

在传递#header 后，我有一个用于沿页面高度浮动#container 的javascript。现在我希望它通过到达#footer div（或其父div，因为它有填充）来停止它的固定浮动。#footer 的高度超过 800 像素，因此 #container 应该通过触摸 #footer 失去其上边距值，并在没有浮动 div 的情况下继续滚动页面。谢谢！

    $(window).scroll(function() {
    if ($(window).scrollTop() >= 300) {
        screenWidth = $(window).width();
        containerWidth = $("#content-4").outerWidth(true);
        pos = screenWidth - containerWidth;
        $("#content-5").css({
            position: 'fixed',
            left: 'auto',
            top: '20px'
        });
    }
    else {
        $("#content-5").css({
            position: 'absolute',
            left: '20px',
            top: '20px'
        });
    }
});

Answer 1

应该是这样的：

  $(window).scroll(function () {
      if (($(document).height() - $(window).scrollTop()) <= 500){
          $("#content-5").css({
              position: 'fixed',
              top: 'auto',
              bottom: '300px'
          });
      } else if ($(window).scrollTop() >= 30) {
          $("#content-5").css({
              position: 'fixed',
              top: '30px',
              bottom: 'auto'
          });
      }else{
          $("#content-5").css({
              position: 'absolute',
              top: '30px',
              bottom: 'auto'
          });
      }
  });

jsFiddle

您需要根据页眉和页脚大小调整数字。

Answer 2

给页脚一个更高的值z-index，给内容一个更低的值

http://jsfiddle.net/vErBy/4/

#content {
height:200px;
width:400px;
position: fixed;
z-index: 1;
background-color:red;
}

#footer {
position: relative;
top:500px;
bottom: 0;
width:400px;
right: 0;
height: 800px;
z-index: 1;
background-color:blue;
}