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帖子＆＃39; initial＆＃39;从顶部滚动，并在所有其他非Apple设备（Android等）中工作。开发人员应该为大众而不仅仅是为Apple开发。这也是为什么我的解决方案是朝着正确方向发展的好方法的原因 - 遗憾的是，它无法解决iOS初始滚动的Apple问题。

不幸的是，只有Apple才能解决这个问题。

我设置的内容非常简单 - 在距离页面顶部大于200px的位置添加一个类。我添加的课程是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();
});

滚动后将div固定在顶部 - 在ios移动设备上发出问题

1 个答案: