jquery - jquery 导航栏不适用于粘性位置

Question

我有一个简单的页面，标题中有一个 div，向下滚动时会变成导航栏，它与 position:fixed 配合使用效果很好，只是它有一个不需要的“从左到右淡入淡出”当我向下滚动时动画，但是 position:sticky 在向下滚动时有一个想要的“淡入中心到两侧”动画。问题是我的代码无法正常使用粘性位置。有什么想法为什么position:sticky 不起作用吗？

$(document).ready(function() {
      $(window).on('scroll', function() {
        if (Math.round($(window).scrollTop()) > 100) {
          $('header').addClass('scrolled');
          $('.toggle').addClass('scrolled-toggle')
          $('img').addClass('scrolled-toggle')
        } else {
          $('header').removeClass('scrolled');
          $('.toggle').removeClass('scrolled-toggle')
          $('img').removeClass('scrolled-toggle')
        }
      });
    });

    body{
        width: 100vw;
        height:100vh;
        margin: 30px 0;
    }
    header{
        box-sizing: border-box;
        text-align: left;
        color: rgb(255, 255, 255);
        background: rgb(0, 0, 0);
        font-size: 1.4em;
        margin: 0 auto;
        width: 120px;
        height: 150px;
        padding: 15px 20px;

    }
    section{
        width: 50%;
        margin: 0 auto;
        margin-top: 150px;
    }
    .toggle{
        display: none
    }
    img {
        display: none;
        cursor: pointer;
    }
    .scrolled{
        position: sticky;
        background: rgba(168, 170, 51, 0.295);
        color: rgb(77, 77, 77);
        width: 100%;
        top: 0;
        height: 50px;
        padding: 15px 40px;
        font-size: 1em;
        font-weight: 400;
        transition: .8s ease;
        text-align: left;
        font-family: 'Open Sans', sans-serif;
    }
    .scrolled-toggle{
        display: inline;
        float: right;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article>
    <div style="height:150px">
    <header>
        this div turns into navbar
        <div class="toggle">
                menu
        </div>
    </header>
</div>
    <section>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio doloribus, architecto inventore veniam veritatis accusamus adipisci cumque voluptas cupiditate aliquam consequatur? Sed dolorem blanditiis reiciendis, eos assumenda porro perspiciatis labore?
    </section>
</article>

Answer 1

.scrolled {
    position:fixed;
}

有效!

WebKit dropped sticky in 2013, Firefox in 2014, and now Blink in (probably) 2016.

Sticky usage stats

如果你真的想使用粘性，似乎有一个库可以完成这项工作 stickybits