Change css header after scrolling

Question

I need help with my jQuery.

I want to change the css of the header after scrolling, but cannot make it work. The only thing that needs to be changed in css is margin to 65px and remove 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;} 

Thank you very much in advance. Jason

Answer 1

Assuming you want to change CSS after scrolling to a specific point, and then return CSS after scrolling back to a specific point using 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 have to do is exchange 100 with any point (the number of pixels on top, and when scrolling) you want the CSS to be replaced by.

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

Answer 2

Reach clarify your question. Do you just need jquery to change the field? or some kind of scroll handler? Here is the code to change the field: JSFiddle :

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

Answer 3

Bind the function to .scroll() and point to $("#menuheader") and do whatever you want. :)

Answer 4

Check out this site:

http://jsfiddle.net/fbSbT/1/

You can change the last function to:

 $(document).on("scrollstop",function() { $('#menuheader').css("margin","65px"); $('#menuheader').css("background",""); });