Question

I have a small, fixed position header on my site. It has a shadow at the bottom of it.
It is all nice and good, but I think it would look better if the header would have a border originally (when the page loads) and when the user scrolls down the shadow would appear and the border would disappear.

Also I would like the process to work backwards as well. So when the user scrolls up to the top the shadow disappears and the border appears.

How could I write this? Could you show me a link to a useful resource or could you show the right piece of code for it? Thanks…

[The code is here: http://jsfiddle.net/dp8fG/3/]

Answer 1

Here, I made one that replaces the border with the shadow and back again. I can make it animated too if you want.

http://jsfiddle.net/dp8fG/4/

I did this by using the .hover event and modifying the css using jQuery.

$("#header").hover(function(){
    //Things to happen on mouseover
    $(this).css({
        'html element':'modifier',
    });
},function(){
    //Things to happen on mouseout
    $(this).css({
        'html element':'modifier',
    });
});