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

Question

我想得到如下例子所示的效果：https://css-tricks.com/scroll-fix-content/

基本上，我想在页面滚动到一定数量后在顶部修复一个 div。 div 最初将被赋予position: relative，在将窗口滚动到一定数量后，div 将固定在顶部，并将具有position: fixed 的属性。

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

有什么可能的解决方案吗？这样 div 将在滚动时而不是在滚动完成后获得固定属性。

Answer 1

即使在 iOS 中，这通常也适用于我（从顶部发布初始滚动）。这是一个用于演示的 JSFiddle： https://jsfiddle.net/fcoxg2kL/

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

不幸的是，只有 Apple 可以解决此问题。

我的设置非常简单——在距离页面顶部大于 200 像素的位置添加一个类。我添加的类是madesticky。在 CSS 中，我让此类将结构与 position: relative; 切换为 position: fixed;。

我希望此建议足以帮助您找到适合您的方法，或为您指明正确的方向。

CSS：

.stickynav {
    position: relative;
    width: 100%;
    background-color: #000;
    }
    .stickynav.madesticky {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 5;
        }

    .stickynav *::before,
    .stickynav *::after,
    .stickynav * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing:    border-box;
        box-sizing:         border-box;
        }

    .stickynav_inner {
        margin: 0 auto;
        width: 100%;
        max-width: 1000px;
        }

    .navlist { margin: 0; padding: 0; }
        .navlist ul { list-style-type: none; }
            .navlist li { display: block; float: left; }
                .navlist a {
                    padding: 10px 15px;
                    display: block;
                    color: #fff;
                    text-decoration: none;
                    }
                    .navlist a:hover {
                        background-color: #454545;
                        }

HTML：

<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>

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();
});