CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Kakar
Kakar

Reputation: 5599

On scroll up use the animate() and show the div

I have two navigation in my website. Both the navigation bars are fixed. Basically when I scroll up, I would like to use the animate() and show both the navigation bar in the page. How do I get the scroll up event and use that to animate the divs, like the Google search widget. I would really appreciate your help. Thank you.

html:

    <div id="navbar_header">
        <a href="#">some link</a>
    </div>
    <div id="main_content">
        <p>Some content...</p>
    </div>
    <div id="navbar_footer">
        <a href="#">some link</a>
    </div>

css:

#navbar_header {
    background: #22313F;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 40px;
}

#navbar_footer {
    background: #22313F;
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 40px;
}

Upvotes: 1

Views: 65

Answers (2)

Tobias Weichart
Tobias Weichart

Reputation: 367

Normally using the window for the scroll event should be sufficient, as it's big enough and the one element, that's being scrolled. If jQuery is loaded correctly, you could try something like this:

$(document).ready(function(){
    var lastTopPosition = 0;
    $(window).scroll(function(){
        var topPosition = $(window).scrollTop();
        if (topPosition > lastTopPosition ){
            $("#navbar_header").stop(true).animate({'top':'-40px'}, 200);
            $("#navbar_footer").stop(true).animate({'bottom':'-40px'}, 200);
        } else {
            $("#navbar_header").stop(true).animate({'top':'0px'}, 200);
            $("#navbar_footer").stop(true).animate({'bottom':'0px'}, 200);
        }
        lastTopPosition = topPosition;
    }
});

This piece of code gets the current position from the top everytime you scroll. If the distance gets bigger (scroll down) the two bars fadeout. If it's getting smaller (scroll up) it fades in. You can replace the FadeOut/In methods here with you animate() call too. A check, if the elements are displayed would be good here too, but I guess you can figure that one out ;-)

Upvotes: 3

Mani5556
Mani5556

Reputation: 403

If I understood this right, something along the lines of:

$("#main_content").scroll(function(){
     $('#navbar_header').show(300); 
     $('#navbar_footer').show(300); 
});

Where show(300) will basically do a 300ms showing animation of your divs.

Upvotes: 0

Related Questions