位置粘性在IE中不起作用[重复]
Posted
技术标签:
【中文标题】位置粘性在IE中不起作用[重复]【英文标题】:Position sticky not working in IE [duplicate] 【发布时间】:2018-07-04 08:32:13 【问题描述】:我正在使用粘性页脚。默认情况下,页脚为position:fixed
。当页面到达底部时,它将变为position:sticky
。
它在 chrome 和 firefox 中运行良好。但不能在 IE11 中工作。即使到达页脚后仍保持为position:fixed
。我认为 IE11 是否不支持 sticky
。我有什么解决办法吗?
检查以下代码:
$(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>
【问题讨论】:
不,不支持caniuse.com/#search=Sticky 它IE11不支持你可以使用Polyfill 我给你做了一个sn-p。请完成它以制作minimal reproducible example 【参考方案1】:这是 IE 中的一个已知错误。 Read here 和 here
您可以尝试使用 flex 或 flexbox,但它不是 W3C 官方的,您可以尝试使用 flex: 1 0 auto;
之类的东西
或者类似position: fixed; bottom: 0
快速搜索放弃github中的这个帖子,阅读here
【讨论】:
【参考方案2】:基于https://developer.mozilla.org/en-US/docs/Web/CSS/position,IE11 似乎不支持位置粘性。
【讨论】:
好的。任何替代解决方案以上是关于位置粘性在IE中不起作用[重复]的主要内容,如果未能解决你的问题,请参考以下文章