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

滚动位置上的jquery动画

1 个答案: