Javascript 在ios移动设备上修复滚动后顶部的div-问题

我希望得到如下示例所示的效果：

基本上，我想在页面滚动到一定数量后，在顶部固定一个div。div最初将被赋予

位置：相对
，在滚动窗口到一定程度后，div将固定在顶部，并具有
位置：固定的属性

这在网络上运行良好，但在IOS设备上，只有在滚动完成后，设备才会固定在顶部

有什么可能的解决办法吗？因此，div将在scroll上获得固定属性，而不是在滚动完成之后。
这通常适用于我，即使在iOS中（从顶部开始后初始滚动）。下面是一个用于演示的JSFIDLE：

对于OP到底想要什么，没有一个真正的解决方案。这是苹果如何利用
position:fixed
的一个bug。我的解决方案确实适用于iOS post'initial'从顶部滚动，并且适用于所有其他非苹果设备（android等）。开发者应该为大众开发，而不仅仅是为苹果。这也是为什么我的解决方案是一个正确方向的好方法——不幸的是，它没有解决苹果iOS初始滚动的问题

不幸的是，只有苹果能够解决这个问题

我所设置的非常简单——在距页面顶部大于200px的距离处添加一个类。我添加的类是
madesticky
。在CSS中，我让这个类用
position:relative切换结构至<代码>位置：固定

我希望这个建议能够满足你寻找适合你的方法的努力，或者为你指明正确的方向

CSS:

HTML:








JQuery：

/**
 * Header Scroll with Add/Remove Class Function
 */
function headerScrollResize(){

    var scroll = $(window).scrollTop();

    if (scroll < 200) {
        $(".stickynav").removeClass("madesticky");
    }

    if (scroll >= 200) {
        $(".stickynav").addClass("madesticky");
    }

}
$(window).on('load scroll', function(){
    headerScrollResize();
});

/**
*具有添加/删除类功能的页眉滚动
*/
函数headerScrollResize（）{
var scroll=$（窗口）.scrollTop（）；
如果（滚动<200）{
$（“.stickynav”）.removeClass（“madesticky”）；
}
如果（滚动>=200）{
$（“.stickynav”）.addClass（“madesticky”）；
}
}
$（窗口）。在（'load scroll'，function（）上{
headerScrollResize（）；
});
这是由于iOS设备采用了一种优化方法，即滚动事件不会连续触发，但只有在滚动完成后才会触发。有一些插件可用于覆盖此行为。感谢您提供的信息。您成功修复了它吗？我所知道的一个这样的插件是iScroll，如果有帮助的话。还没有，尝试过其他一些插件，如果它有效的话，我会尝试使用iScroll。谢谢。你听起来不确定，所以我想我会在iphone6模拟器上测试它。事实证明，除非用户停止滚动（松开手指）OP想要修复的内容，否则它不会工作。查看您的实际代码—对于OP想要的东西，实际上并没有一个解决方案。这是苹果如何利用position:fixed的一个缺陷。我的解决方案确实适用于iOS post“initial”从顶部滚动，并且适用于所有其他非应用设备（android）。开发者应该为大众开发，而不仅仅是为苹果。这也是为什么我的解决方案是一个正确方向的好方法——它只是不能解决苹果的问题。只有苹果可以解决这个问题。我不会讨论开发者应该如何开发，或者你的解决方案是否是一个好方法。你承认你的“解决方案”不能解决苹果的问题，因为苹果的主要问题是ios设备，那么你能告诉我你的代码在这里的作用是什么吗？“只有苹果能解决这个问题”绝对是解决这个问题的捷径。如果你真的相信这是事实，你最好把它作为一个评论，而不是写一个176字的答案，代码对解决主要问题毫无帮助。
<div style="height: 200px;"></div>

<div class="stickynav">
    <div class="stickynav_inner">
        <ul class="navlist">
            <li><a href="#">Nav Item 1</a></li>
            <li><a href="#">Nav Item 2</a></li>
            <li><a href="#">Nav Item 3</a></li>
        </ul>
        <div style="clear: both;"></div>
    </div>
</div>

<div style="height: 2000px;"></div>

/**
 * Header Scroll with Add/Remove Class Function
 */
function headerScrollResize(){

    var scroll = $(window).scrollTop();

    if (scroll < 200) {
        $(".stickynav").removeClass("madesticky");
    }

    if (scroll >= 200) {
        $(".stickynav").addClass("madesticky");
    }

}
$(window).on('load scroll', function(){
    headerScrollResize();
});