jQuery .scroll 和 scrollTop 在 IE 中不起作用答案

【问题标题】：jQuery .scroll and scrollTop not working in IEjQuery .scroll 和 scrollTop 在 IE 中不起作用
【发布时间】：2015-12-29 04:59:37
【问题描述】：

codepen link

滚动事件行为在 IE 中无法正常工作。当我向下滚动鼠标滚轮时，标题应固定在顶部，类为nav-down，但它首先附加类nav-up，然后是nav down

其他浏览器运行良好。谁能帮帮我吗。 :)

$(function(){
  var lastScrollTop = 0;
  $(window).scroll(function(){
    if ($(window).scrollTop() > 600) {
      console.log('WORKING');
          //scroll
          var st = $(this).scrollTop();
          console.log('lastScrollTop:' +lastScrollTop+ 'st: '+st+' position:'+ (lastScrollTop - st));
          if(lastScrollTop - st < 0){
            console.log('down');
            $(".top-header").removeClass("nav-down").addClass("nav-up");
          }else{
            console.log('up');
            $(".top-header").removeClass("nav-up").addClass("nav-down");
          }
          lastScrollTop = st;    
    } else {
       $(".top-header").removeClass("nav-down").addClass("nav-up");
    }
  });
});

HTML

<header class="top-header nav-up">
  <div class="container">
    <div class="row">
      <div class="col-md-6"><a class="brand-name">logo</a></div>
      <div class="col-md-6 text-right">
        <div class="btn btn-header">Download</div>
      </div>
    </div>
  </div>
</header>
<section class="bring-scroll">
  <div class="container">
    <div class="row text-center">
      <h1>keep scrolling to see the effect of navigation scrolling</h1>
    </div>
  </div>
</section>

CSS

body {
  height: 1600px;
}
.brand-name {
  width: 200px;
  display: inline-block;
  font-size: 25px;
  color: #fff;
}
.brand-name img {
  width: 100%;
}
.top-header {
  background: #374965;
  height: 60px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 33;
  padding: 9px 0;
  transition: top 0.2s ease-in-out;
  width: 100%;
}
.top-header.nav-up {
  top: -60px;
}
.top-header.nav-down {
  top: 0px;
}
.btn-header {
  background: #ec4a3d;
  color: #ffffff;
}
.bring-scroll {
  color: white;
  height: 600px;
  display: block;
  background: #ec4a3d;
  margin-bottom: 5000px;
}

【问题讨论】：

欢迎来到 SO。请访问help center 了解询问内容和方式。提示：在此处显示代码。这里也有一个 sn-p 编辑器。还要在控制台中查找错误并在谷歌搜索后报告它们
感谢您的反馈。我已经编辑了帖子。
在 Chrome 中，除非我再次开始向上滚动，否则我不会设置标题
是的，我在 IE 中想要的东西完全一样，但它不像 chrome 那样工作

标签： javascript jquery css internet-explorer

【解决方案1】：

您使用的是哪个版本的 jQuery？版本 2.X 和 3.X 仅支持 IE 9+，不支持较旧的浏览器版本，例如 IE 6-8，这可能是您的情况。

这是在http://jquery.com/browser-support/上指定的

如果您需要支持 Internet Explorer 6-8、Opera 12.1x 或 Safari 5.1+ 等旧版浏览器，请使用 jQuery 1.12。

【讨论】：