使固定位置元素在屏幕上不超过某个阈值答案

【问题标题】：Make a fixed position element not pass a certain threshold on screen使固定位置元素在屏幕上不超过某个阈值
【发布时间】：2016-01-08 08:59:24
【问题描述】：

我有一个固定位置的div：

<div id="fixed"></div>

#fixed {
  width: 300px;
  height: 375px;
  float: right;
  margin: 75px;
  position: fixed;
  right: 0%;
}

滚动到页面底部后，我有一个高度为 210 像素的页脚。一旦我滚动到页面底部，我的固定 div 就会重叠到页脚上。我怎样才能使固定的 div 不会滚动到页脚上？

【问题讨论】：

您能提供更多的 HTML 代码吗？试试overflow:auto;
当您到达页脚时，您希望页眉发生什么变化？它应该消失/跳回顶部吗？
理论上，解决方案是将页脚固定到视口或 HTML 的下部，这样您就无法滚动过去。
@arcyqwerty 我怎样才能做到这一点？是否有一个不允许任何内容滚动过去的 CSS 元素？
@ogk 我认为你需要 JS。

标签： html css

【解决方案1】：

如果javascript 是可能的，请查看sn-p 如果不是，那么你可以：

#fixed{
z-index: 2;
}    

your_footer{
position: relative;
z-index: 1;
}

所以至少它不会与页脚重叠，而是在它下面

注意- 75是你设置的margin的75px，如果你看到sn-p全屏最好

$(function() {

  $(window).scroll(function() {

    var foff = $('footer').position().top;
    var fh =  $('#fixed').height();
    var h = $('#fixed').offset().top + fh;       
        
    if ( h >= foff) {          
        $('#fixed').css({
           position: "absolute",
           top: foff - fh - 75 
        });
    }else{
      $('#fixed').css('position','fixed');
    }
  });


});

* {
  margin: 0;
  padding: 0;
}
#fixed {
  width: 300px;
  height: 375px;  
  margin: 75px;
  position: fixed;
  right: 0%;
  background: red;  
}
#content {
  width: 70vw;
  height: 700px;
  margin-left: 15vw;
  background: lightgrey;
}
footer {
  width: 100vw;
  height: 290px;
  background: navy;
  position: relative;
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fixed"></div>

<div id="content"></div>

<footer>
  footer
</footer>

【讨论】：