jquery - 向下滚动时，带有 jQ​​uery .addClass 和 .removeClass 的 CSS3 过渡不起作用

Question

我需要类似的东西，比如当用户向下滚动 20 像素时，菜单栏应该以动画过渡方式保持粘性。但在这种情况下，CSS 动画不起作用。如果您有任何解决方案，请告诉我。提前致谢。

J查询:

jQuery(window).scroll(function()
    {
        if( jQuery(window).scrollTop() > 30 )
        {
            jQuery('.dark-menu').addClass('navbar-fixed-top').animate({transition: ".2s all"});
        } 
        else 
        {
            jQuery('.dark-menu').removeClass('navbar-fixed-top');
        }
    });

.top-header {
    text-align:center;
    background:#f9f9f9;
    padding:6px;
}
.dark-menu {
    text-align:center;
    background:#444;
    color:#fff;
    padding:20px;
}
ul li {
    list-style:none;
    display:inline-block;
    margin:0 10px;
}
.navbar-fixed-top {
    position:fixed;
    top:0;
    width:100%;
    -webkit-transition: .3s all;
    -moz-transition: ;
    -ms-transition: ;
    -o-transition: ;
    transition: ;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
    <div class="top-header">
        <p>My Phone Number</p>
    </div>
    <nav class="dark-menu">
        <ul>
            <li>Home</li>
            <li>Logo</li>
            <li>Contact</li>
            <li>Examples</li>
        </ul>
    </nav>
</header>
<article>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut eveniet rem, tempora aut numquam asperiores consequatur deleniti architecto minus modi vel ipsa optio perspiciatis saepe quas fugit dignissimos non ipsum eos magnam tenetur eius quae, temporibus in. Blanditiis, voluptates! Reprehenderit autem enim et voluptatum nostrum reiciendis repellat temporibus laborum accusamus, ad. Reprehenderit corporis sapiente ducimus enim quisquam aspernatur, deserunt ab impedit accusamus magni sed dolor est pariatur vero, tempore possimus itaque rem aut adipisci cupiditate cum. Unde perspiciatis consequatur nam corporis ipsam eaque asperiores eligendi, autem cum, quia ea sequi, a. Accusantium dolor sit commodi corporis quis, possimus quibusdam iure eaque delectus porro, consequatur, earum quo voluptates maxime voluptas beatae nostrum atque voluptate ipsum fugit! Architecto debitis obcaecati laborum. Architecto quos cumque adipisci placeat, nisi sequi, praesentium aperiam. Nam culpa tempora quibusdam autem, consectetur sequi repellat corporis modi magni numquam aliquid reprehenderit in vel fugit! Quisquam explicabo repellendus sunt animi tempora accusantium fugiat dignissimos asperiores molestias, veritatis laboriosam. Nobis tempore, eius saepe velit alias ullam possimus tempora rerum omnis dignissimos pariatur quod vitae, perspiciatis quas corporis at laborum. Explicabo possimus recusandae quas sint voluptatibus perspiciatis quisquam consectetur nisi consequuntur rerum illo maiores asperiores incidunt dignissimos, facere excepturi, labore nemo adipisci dolorum, veniam deserunt quae! Qui ratione impedit inventore, itaque quasi porro fugit voluptas ducimus unde. Dicta, temporibus iste, fugit aspernatur sunt veniam deleniti corrupti maxime voluptates cumque quos possimus ipsa dignissimos consequuntur quasi, pariatur dolorem dolores aliquid. Quidem repellendus explicabo, repellat voluptates voluptatibus iste doloremque adipisci impedit distinctio ipsa eveniet labore, repudiandae qui praesentium dolor, beatae reiciendis error cupiditate? Vitae eius reprehenderit illo ratione, autem, ipsam eaque, distinctio cupiditate suscipit architecto ab dolores rerum cumque praesentium harum dolorem aperiam nisi error! Facere pariatur repudiandae natus fugit optio, porro quas nihil placeat tenetur. Nostrum, repudiandae, doloremque. Doloribus adipisci, provident et aliquid totam eligendi earum, assumenda perspiciatis quasi a quidem, aliquam molestiae quaerat! At facilis amet nulla nisi nihil mollitia culpa eius magni quam qui distinctio, sed delectus vitae magnam. Velit eos, accusantium similique! Maiores, harum iusto ipsum recusandae facilis. Impedit architecto illo facere porro. Obcaecati eligendi perferendis fugit, quis accusamus numquam. Architecto ex, expedita asperiores aperiam dolore cumque accusantium beatae fuga dolor ducimus! Repellendus perspiciatis nemo est quidem cumque aspernatur rem sed perferendis reprehenderit veniam ipsam quibusdam ea voluptatum doloremque animi, officia ex, autem quis voluptates deleniti in laboriosam iusto. Numquam vero voluptatibus, eos libero praesentium ipsum sint, explicabo eum sequi!</p>
</article>

Answer 1

在.dark-menu类中添加top属性

.dark-menu {
    top:50px; /*or any other value you want*/
    text-align:center;
    background:#444;
    color:#fff;
    padding:20px;
}