CODEWITHSUNDEEP
jqueryscrolljquery-animate
bukitemas
bukitemas

Reputation: 13

jquery animate on scroll position

Im trying to achieve a sticky navigation like in http://www.trinitydecorator.com/decoration/our-work/ the sticky navigation scroll smoothly when it appear. so far i have :

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

                var nav = $('.pengejar');

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

            });

and the 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>

and the css is as following :

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

Upvotes: 1

Views: 3111

Answers (1)

Jakub Kotula
Jakub Kotula

Reputation: 241

In this case, you actually don't need second class (.sulap). It's just jQuery toggling (show/hide or better slideDown/slideUp).

Just change your JS code to: 

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

Upvotes: 2

Related Questions