CODEWITHSUNDEEP
javascriptjqueryhtmlcss
trying_hal9000
trying_hal9000

Reputation: 4403

Jquery html/css: Creating drop shadow on fixed pos header that appears and disappears when scrollling

new to jquery here but I'm trying to learn some different stuff that's been done on websites I frequent.

One such case that I can't figure out, is how to create a drop shadow for a fixed positioned header, so that when you scroll a drop shadow appears under the header and then disappears when you aren't scrolling anything. Here's the website I frequent that uses this technique www.thisisluckyme.com

It doesn't seem too complex but I can't find much to go off of when trying to make this. Any help or insight into how its down would be very appreciated!

Upvotes: 2

Views: 3854

Answers (1)

maxedison
maxedison

Reputation: 17563

Pretty simple. You just bind an event handler to the window's scroll event, and check the position of the fixed header's top. If it's not 0, add the shadow. If it is 0, remove the 0.

Working example: http://jsfiddle.net/3cRe5/

the JS:

var header = $('.header');

$(window).scroll(function(e){
    if(header.offset().top !== 0){
        if(!header.hasClass('shadow')){
            header.addClass('shadow');
        }
    }else{
        header.removeClass('shadow');
    }
});

Upvotes: 10

Related Questions