Question

i have this html and css code:

<div class="header">

</div>

.header {
    top:0;
    left:0;
    right:0;
    width:100%;
    background:#3b5998;
    height:95px;
    margin-bottom: 50px;
position:fixed;
}

What i’m trying to do here is the header should be in the fixed position (top) whenever the user scrolls down. I have no problem with that. I easily accomplished that task.

I want to add a different styling on it when the user scrolls down. I want to add a box shadow effect on it when the user scrolls down so it will look elevated. If the user scrolls up and reached the top portion of my webpage, it will revert back to the default css style (which has no box shadow).

More like saying:

scrolled down = activate box shadow effect

if scrolled up and reached the top = revert back

I am not aware of any css code for this, maybe someone will help me with their javascript/jquery expertise to make a code?

sorry if my explanation is too long or a little confusing. Thank you very much!

Answer 1

Try like this

$(window).scroll(function(){
if (document.body.scrollTop === 0)
     $(".header").css({"box-shadow":"none"});
else
     $(".header").css({"box-shadow":"0px 0px 1px #EEE"});
});

See Demo For Reference only