Change css header after scrolling

Question

I need some help with my JQuery.

I would like to change the css of the header after scrolling, but can't get it work. The only thing that must change in the css is margin to 65px and delete the logo.

Here is the code

#menuheader {
background: -webkit-gradient(linear, center top, center bottom, from(#fff),to(#ccc));
background-image: linear-gradient(#fff, #ccc);
box-shadow: 3px 3px 3px 3px #333;
height: 40px;
position: relative;
margin: 165px auto 0;
z-index: 10;}

Many thanks in advance. Jason

Answer 1

Assuming you want to change the CSS after scrolling beyond a certain point, and then revert the CSS once you've scrolled back to a certain point, with jQuery:

$(window).scroll(function() {

    //After scrolling 100px from the top...
    if ( $(window).scrollTop() >= 100 ) {
        $('#logo').css('display', 'none');
        $('#menuheader').css('margin', '65px auto 0');

    //Otherwise remove inline styles and thereby revert to original stying
    } else {
        $('#logo, #menuheader').attr('style', '');

    }
});

Then all you need to do is swap out 100 with whatever point (how many pixels down from the top, while scrolling) you want the CSS to be swapped at.

http://jsfiddle.net/dJh8w/4/

Answer 2

Plese clarify your question. Do you just need the jquery to change margin? or some sort of scroll handler? Here is code for changing margin: JSFiddle :

 $('#menuheader').attr("style", "margin:100px auto 0");