修復了DIV容器通過到達頁面的頁腳部分而停止浮動的問題

Question

#header傳遞后，我有一個JavaScript用於沿頁面高度浮動#container。 現在，我希望它通過到達#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;
}