Question

我正在使用jQuery-1.10.2并且我正在使用函数$(window).scroll。我在移动设备上滚动时没有执行$(window).scroll，而是滚动后我的手指释放屏幕时。 IE10也推迟$(window).scroll。

我使用$(window).scroll通过更改top:导航栏上的css属性position:fixed;来使页面滚动到页面。当向下滚动足够时，导航栏最终会以position:fixed的形式粘贴到页面顶部。是否有更兼容的替代方案可以为我的导航栏获得相同的结果？是否有针对移动设备或IE10的修复程序？

$(window).scroll(function () {
    $('.navbar').css('top', Math.max(0, 350 - $(this).scrollTop()));
    var scroll = $(document).scrollTop();
});

这是一个没有图像的小提琴。看看导航栏。 http://jsfiddle.net/93tzq/

Answer 1

如果我理解你想要正确做什么，我很确定你已经过度思考了这一点。当你滚动时保持导航元素在顶部，你不需要任何js。您需要做的就是相应地设置z-index和位置。

例如：

.nav-overlay{

position: absolute;
top: 90px;
left: 10%;
z-index: 100;
display: block;
width: 50px;
height: 50px;
}

然后把html如下：

<nav class='nav-overlay'>
NAV BAR HERE
</nav>

Answer 2

您没有指定移动浏览器，但这是iOS中Safari的常见问题。在滚动完成之前，MobileSafari不会触发window.scroll - 这是一个以多种方式解决的问题（例如，参见iscroll）。这是一个similar post，可以回答你的问题，就像制作一个粘性导航栏一样。

$（window）.scroll在移动设备和Internet Explorer上无法正常工作

2 个答案: