CODEWITHSUNDEEP
jquerycssheader
Jssonline
Jssonline

Reputation: 110

Change css header after scrolling

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

Upvotes: 5

Views: 13209

Answers (5)

sam kh
sam kh

Reputation: 159

You can do it by a simple java script

window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
    document.getElementById("header").style.padding = "1em 2em";
  } else {
    document.getElementById("header").style.padding = "2em 3em";
  }
}

Upvotes: 1

stuajc
stuajc

Reputation: 261

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/

Upvotes: 11

esonat
esonat

Reputation: 41

Check out this website:

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

You can change the last function to: 

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

Upvotes: 0

poodle
poodle

Reputation: 107

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");

Upvotes: 1

Rey Libutan
Rey Libutan

Reputation: 5314

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

Upvotes: 0

Related Questions