做一个固定位置元素无法通过在屏幕上

一定的阈值我有一个固定的位置DIV：做一个固定位置元素无法通过在屏幕上

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

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

一旦我滚动到页面的底部，我有了的210px的高度页脚。一旦我滚动到页面的底部，我的固定div重叠在页脚上。我怎样才能让固定div不滚动页脚？

来源

2016-01-07 ogk

请提供更多HTML代码吗？尝试'overflow：auto;' –

当你想到页脚时，你想要在页眉中发生什么？它应该消失/跳回顶部？ – arcyqwerty

理论上，解决方法是将页脚固定到视口或HTML的较低位置，以便您不能滚过它。 – arcyqwerty

如果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>

来源

2016-01-08 00:59:24

做一个固定位置元素无法通过在屏幕上

回答

相关问题