Question

I really need some help with this. I’m 100% new to it. I need some general help on it. I hope you guys can help with cleaning up the code. Also, I would like to do this animation which I can’t get to work now. The code is actually working great. It does what I would like to do. Scroll down, sticky the navigation when it reaches the top.

Link to website

If you scroll down, the navigation bar appears, plus you’ll see the ribbon on the left come down. My problem: scrolling back up makes it fade out just like I want to. But I can’t get the ribbon to slide back up.
Second problem: Which comes to my general help/cleaning the code, the animation queues when scrolling up and down a few times.

jQuery(document).ready(function($) {      var divh = document.getElementById('stnav').offsetHeight;
        var stickyHeaderTop = $('#stnav').offset().top;
        $('#logoheader').css('margin-top','-90px');
        $('#nav').hide();
        $(window).scroll(function(){
                if( $(window).scrollTop() > stickyHeaderTop ) {
                        $('#stnav').addClass("sticky");
                        $('#content').css('margin-top',divh);
                        $('#logoheader').animate({marginTop:"0"},800);
                        $('#nav').fadeIn(1500);
                } else  {
                        $('#stnav').removeClass("sticky");
                        $('#content').css('margin-top','0px');
                        $('#nav').fadeOut(1500);
                }
        })

    });

Thanks in advance!

Answer 1

Try this version. Create the effect only the first time, not every time the user scrolls. Also, clear the current queue before creating a new animation.

$(window).scroll(function(){
                    if( $(window).scrollTop() > stickyHeaderTop ) {
                            if(!$('#stnav').hasClass("sticky")){
                                $('#stnav').addClass("sticky");
                                $('#content').css('margin-top',divh);
                                $('#logoheader').stop(true, true).animate({marginTop:"0"},800);
                                $('#nav').stop(true, true).fadeIn(1500);
                            }
                    } else  {
                            if($('#stnav').hasClass("sticky")){
                                $('#stnav').removeClass("sticky");
                                $('#content').css('margin-top','0px');
                                $('#nav').stop(true, true).fadeOut(1500);
                            }
                    }
            })