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

我有一个javascript，用于在传递#标题后沿页面高度浮动#容器。现在，我希望它通过到达#footer div（或者它的父div，因为它有padding）来停止固定浮动#页脚高度超过800px，因此#容器应通过触摸#页脚并在没有浮动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'
        });
    }
});

---

给页脚加一个较高的

z-index

，给内容加一个较低的

z-index


这应该是：

  $(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'
          });
      }
  });

$（窗口）。滚动（函数（）{
if（（$（document.height（）-$（window.scrollTop（））=30）{
$（“#内容-5”）.css({
位置：'固定'，
顶部：“30px”，
底部：“自动”
});
}否则{
$（“#内容-5”）.css({
位置：'绝对'，
顶部：“30px”，
底部：“自动”
});
}
});


你需要根据页眉和页脚的大小调整数字。
我不清楚你想做什么。页脚的z索引越高，内容的z索引越低，内容就会隐藏在页脚后面，你看不到。所有的计算是什么？您没有使用结果。。。
  $(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'
          });
      }
  });