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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-29 08:02:08  来源:igfitidea点击:

Position sticky not working in IE

javascriptjqueryhtmlcssinternet-explorer

提问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

这是 IE 中的一个已知错误。在这里这里阅读

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 似乎不支持位置粘性。