1

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;
    }
4

1 に答える 1

2

この場合、実際には 2 番目のクラス (.sulap) は必要ありません。それは単なる jQuery のトグル (表示/非表示またはより良いスライドダウン/スライドアップ) です。

JS コードを次のように変更するだけです。

jQuery("document").ready(function($){
            var nav = $('.pengejar');
            $(window).scroll(function () {
                if ($(this).scrollTop() > 324) {
                    nav.slideDown();
                } else {
                    nav.slideUp();
                }
            });
        });
于 2013-06-29T21:33:09.530 に答える