CODEWITHSUNDEEP
jquery
DarkLeafyGreen
DarkLeafyGreen

Reputation: 70466

SlideDown/Up by animating height with jquery

I want to achieve an effect that is similar to the header effect on ibm.com. The header itself is fixed. When you scroll down the header gets smaller. When you scroll back it gets its normal height.

This is how I tried it:

$(document).ready(function() {           

    $(window).scroll(function(e){
        var scrollTop = $(window).scrollTop();
        if(scrollTop > 50){
                $('.main_nav').animate({
                height:"30px"
            });
        }
    });

});

This makes the header get smaller. But how can I animate it back to its normal height? Any other ideas?

Upvotes: 0

Views: 946

Answers (3)

voigtan
voigtan

Reputation: 9031

is it the logo you want to get smaller also? you may want to use jquery-ui to animate with a css-class to change the height and other elements (like hide the search block)

but if its the height James have done, but you dont need to store it in a data on the element:

$(document).ready(function() {
    var main_nav = $(".main_nav"),
        oldHeight = main_nav.height(),
        scrollUpTo = 30,
        hideHeight = 50,
        w = window;

    $(window).scroll(function(e){
        var scrollTop = $(w).scrollTop();
        setTimeout(function() {
            if(scrollTop > hideHeight  && main_nav.height() !== scrollUpTo ){
                main_nav.stop(/*clearQueue*/true).animate({ height: scrollUpTo });
            } else if(scrollTop < hideHeight  && main_nav.height() !== oldHeight ) {
                main_nav.stop(/*clearQueue*/true).animate({ height: oldHeight });
            }
      }, 100);
    });

});

if the height is not equal to the old height and scrollTop is less then 50 then animate it once.

you may also want to use a timeout so you aren't triggering all the time when you scroll (its recommended to have a timeout on the scroll event)

but to fix all the child elements of the the main_nav my guess is that jquery-ui switchClass http://jqueryui.com/docs/switchClass/ may fix it.

Upvotes: 1

Chris Marais
Chris Marais

Reputation: 411

Have a look here: http://jsfiddle.net/Xvqqb/6/

I tweaked your code slightly. I'm cancelling the animations if a user scrolls up and down quickly. Set the header's position to fixed.

JS

var header = $('#header')

$(window).scroll(function(e){    
    var scrollTop = $(window).scrollTop();
    if(scrollTop > 50 ){
        header.stop().animate({height:"30px", queue: false});
    }
    else{        
        header.stop().animate({height:"50px", queue: false});
    }
});​

CSS

#header {
    height:50px;
    width:716px;
    position:fixed;
    left:0px;
    top:0px;
    background:red;
    z-index: 900;
}

Html

<div id="header"></div>
<div id="bodyContent">
    <div style="height:1000px"></div>     
</div>

​

Upvotes: 5

James Montagne
James Montagne

Reputation: 78730

    if(scrollTop > 50){
        $('.main_nav').animate({
            height:"30px"
        });
    }else{
        $('.main_nav').animate({
            height:<OLD HEIGHT>
        });
    }

If the original height is not fixed, you can grab the original height and use data to store it before shrinking it.

In addition, you should probably keep track of whether or not it is already shrunk and only animate when appropriate rather than calling animate every time.

Upvotes: 1

Related Questions