html - 使固定位置元素不超过屏幕上的某个阈值

Question

我有一个固定位置的div:

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

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

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

Answer 1

如果 javascript 可行，请查看代码片段，否则您可以:

#fixed{
z-index: 2;
}    

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

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

请注意 - 75 是您设置的 75px 边距，如果您全屏看到代码段，它是最好的

$(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>