Question

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 http://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!

Answer 1

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');
    }
});