Javascript jQuery.scroll和scrollTop在IE中不工作
滚动事件行为在IE中无法正常工作。当我向下滚动鼠标滚轮时,标题应固定在顶部,并带有Javascript jQuery.scroll和scrollTop在IE中不工作,javascript,jquery,css,internet-explorer,Javascript,Jquery,Css,Internet Explorer,滚动事件行为在IE中无法正常工作。当我向下滚动鼠标滚轮时,标题应固定在顶部,并带有nav down类,但它先附加classnav up,然后再附加nav down 其他浏览器工作正常。 有人能帮我吗 您使用的是哪个版本的jQuery?版本2.X和3.X只支持IE9+,不支持旧的浏览器版本,如IE6-8,这可能是您的情况 这是在上指定的 如果您需要支持Internet Explorer 6-8、Opera 12.1x或Safari 5.1+等较旧的浏览器,请使用jQuery 1.12 欢迎来到SO
nav down
类,但它先附加classnav up
,然后再附加nav down
其他浏览器工作正常。
有人能帮我吗
您使用的是哪个版本的jQuery?版本2.X和3.X只支持IE9+,不支持旧的浏览器版本,如IE6-8,这可能是您的情况 这是在上指定的 如果您需要支持Internet Explorer 6-8、Opera 12.1x或Safari 5.1+等较旧的浏览器,请使用jQuery 1.12
欢迎来到SO。请访问,了解如何提问。提示:在这里显示代码。这里也有一个代码片段编辑器。另外,在控制台中查找错误并在谷歌搜索后报告。感谢您的反馈。我已经编辑了这篇文章。在Chrome中,除非我重新开始向上滚动,否则我不会使用标题。是的,这与我在IE中想要的完全相同,但它不像Chrome那样工作
$(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");
}
});
});
<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>
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;
}