jquery - jquery在滚动位置上动画

Question

我试图在http://www.trinitydecorator.com/decoration/our-work/中实现粘性导航 ，粘性导航在出现时平滑滚动。到目前为止，我有：

jQuery("document").ready(function($){

                var nav = $('.pengejar');

                $(window).scroll(function () {
                    if ($(this).scrollTop() > 324) {
                        nav.addClass("sulap");
                    } else {
                        nav.removeClass("sulap");
                    }
                });

            });

和 html ：

    <div class="pengejar">
    <ul>
        <li><a href="#">Destinasi</a></li>
        <li><a href="#">Acara</a></li>
        <li><a href="#">Belanja</a></li>
        <li><a href="#">Kuliner</a></li>
        <li><a href="#">Hotel</a></li>
        <li><a href="#">Transportasi</a></li>
    </ul>
</div>

和CSS如下：

    .pengejar {
    background: rgb(0, 0, 0) transparent; /* default fallback */
    background: rgba(0, 0, 0, 0.5); /* nice browsers */
    padding: 0;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 999;
    display: none;
}

    .sulap {
        display: block !important;
    }

Answer 1

在这种情况下，您实际上不需要二等舱 (.sulap)。这只是 jQuery 切换（显示/隐藏或更好的 slideDown/slideUp）。

只需将您的 JS 代码更改为：

jQuery("document").ready(function($){
            var nav = $('.pengejar');
            $(window).scroll(function () {
                if ($(this).scrollTop() > 324) {
                    nav.slideDown();
                } else {
                    nav.slideUp();
                }
            });
        });