我意识到很多人在IE中遇到各种jQuery问题。 我已经阅读了很多这些但是找不到我的问题的解决方案。
我的问题可以被描述为相对于滚动位置(通过.css()方法)定位的导航栏的“滞后”或“跳跃”定位。
我还没有机会在其他IE版本中进行测试,但IE11(PC)和Chrome(Android平板电脑)是两种浏览器,它们在正确的位置显示导航并且滞后。
要查看问题,请打开IE11,滚动到页面底部并开始向上滚动。 http://dev.vlcek.me/sample6n.html
我想知道是否有更好(更干净)的方法来编码所需的效果,以提高IE11和Android移动设备的性能。
提前感谢任何提示!
这是我的代码:
<script type="text/javascript">
$(document).ready(function() {
var lastScrollTop = 0;
var curr = 0;
var scrollingDown = 0;
var scrollingUp = 0;
$(window).scroll(function(event){
curr = $(this).scrollTop();
if (lastScrollTop < curr){
// SCROLLING DOWN
$("#status").text('DOWN');
scrollingDown = curr;
$("#scrollingDown").text("Down: " + scrollingDown);
} else{
// SCROLLING UP
$("#status").text('UP');
$("#nav-wrapper").css('position', 'relative');
$("#nav-wrapper").css('top', curr - 100);
diff = scrollingDown - curr;
if (diff <= 100){
$("#diff").text("diff (100): " + diff);
$("#nav-wrapper").css('top', (curr - 100) + diff );
}else{
$("#diff").text("diff: " + diff);
$("#nav-wrapper").css('top', curr );
}
}
lastScrollTop = curr;
$("#curr").text('curr: ' + curr);
}); // scroll()
}); // docready
答案 0 :(得分:1)
而不是更改标题上的顶部样式,为什么不在向上滚动时将其设为position:fixed
?它会给你相同的效果,但是没有常量的css更新,并且在IE中滚动时会看起来正确。