javascript 位置粘性在 IE 中不起作用
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/48437005/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Position sticky not working in IE
提问by Prasath V
I'm using a sticky footer. By default the footer was position:fixed. When the page reaches bottom it will changes to position:sticky.
我正在使用粘性页脚。默认情况下,页脚是position:fixed. 当页面到达底部时,它将变为position:sticky。
It was working fine in chrome and firefox. But not working in IE11. Still remain as position:fixedeven after reached the footer. I think whether stickywas not supported by IE11 or not. Does i have any solution for this.
它在 chrome 和 firefox 中运行良好。但不适用于 IE11。position:fixed即使到达页脚后仍保持原样。我认为stickyIE11是否不支持。我对此有任何解决方案吗?
Check below code:
检查以下代码:
$(document).scroll(function() {
checkOffset();
});
function checkOffset() {
if ($('#sticky').offset().top + $('#sticky').height() >=
$('.bottom_two').offset().top - 10)
$('#sticky').css({
'position': 'sticky',
'transiton': 'position 0.4s'
});
if ($(document).scrollTop() + window.innerHeight <
$('.bottom_two').offset().top)
$('#sticky').css({
'position': 'fixed',
'transiton': 'position 0.4s'
}); // restore when you scroll up
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sticky" class="stick">
<div class="container">
<div class="bo_wrap">
<div class="bo_wrap_left">
<a class="bot_down testride" href="#buy_ride"></a>
<a class="bot_down downl" href="#" target="_blank"></a>
</div>
<div class="clear_both"></div>
</div>
</div>
</div>
<div class="bottom_two">
<div class="container">
<p>company 2017. all rights reserved.</p>
</div>
</div>
回答by Vishwa
This is a known bug in IE. Read hereand here
You can try using flex or flexbox but it's not official W3C, you can try with something like flex: 1 0 auto;
您可以尝试使用 flex 或 flexbox 但它不是官方的 W3C,您可以尝试使用类似的东西 flex: 1 0 auto;
Or something like position: fixed; bottom: 0
或者类似的东西 position: fixed; bottom: 0
Quick search gives up this thread in github, read here
快速搜索在github中放弃了这个线程,阅读这里
回答by Talha
Based on https://developer.mozilla.org/en-US/docs/Web/CSS/position, position sticky doesn't seem to be supported by IE11.
基于https://developer.mozilla.org/en-US/docs/Web/CSS/position,IE11 似乎不支持位置粘性。

