修正了DIV容器通过到达页脚部分来停止浮动

Question

在传递#header之后，我在页面高度上有一个浮动#容器的javascript。现在，我希望它停止它的固定浮动通过达到#页脚div (或它的父div，因为它有填充)。页脚的高度超过800 so，因此#容器应该通过触摸#fo脚失去其最高边距值，并继续滚动页面而不使用浮动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;
}