Question

我有一个固定的位置div：

public String textBetweenWords(String sentence, String firstWord, String secondWord)
{
    return sentence.substring(sentence.indexOf(firstWord) + firstWord.length(), 
        sentence.indexOf(secondWord));
}

String between = textBetweenWords("Hello my dear cousin!", "Hello", "cousin");

println("[" + between + "]")

滚动到页面底部后，我的页脚高度为210px。一旦我滚动到页面的底部，我的固定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>

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

1 个答案: