Question

传递#header后，我在页面高度上有一个用于浮动#container的javascript。现在我希望它通过到达#footer div（或其父div，因为它有填充）来停止它的固定浮动。＃footer的高度超过800px，因此#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;
}

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

2 个答案: