jquery - Change css properties of 3 divs on scroll javascript -

just wanting find out if possible before try hacking code.

i have site built on twitter bootstrap fixed-nav @ top.

in nav have image .css property set of height , width, , margin set on navbar of 155px, , body padding of 180px compensate big fixed nav. followed carousel (bootstrap feature).

the question is, possible resize nav, changing 3 css properties of 3 divs user scrolls past carousel. nav go 180px down 30 px , stay fixed top of page once user scrolls past carousel. use less page real estate. kicker using responsive sizing, affect people viewing on devices larger 979px wide. appreciated.

you need scroll function

here is demo implement class on menu , style element according http://jsfiddle.net/hushme/3t6lt/2/

$(window).scroll(function () { var sc = $(window).scrolltop() if (sc > 50) {     $("#menu").addclass('small') } else {      $("#menu").removeclass('small') } 

});