It seems to be working on my end with the latest versions of Firefox, IE, Chrome, and Opera. Are you still experiencing this problem?
The shadow is on yes, but I don’t want the shadow showing until I scroll down the page. Then, when I scroll back to the top of the page the shadow disappears. For a somewhat similar example of what I am trying to do, look at yahoo finance—> finance.yahoo.com .You can see the purple shadow that appears at the bottom of the header when scrolling down, then it disappears when at the page top.
Ah, sorry about that. I misread your question.
This StackOverflow answer is perfect for your needs: http://stackoverflow.com/questions/13795283/fixed-header-while-scroll
You basically need to use Javascript to do something like this, else your shadow will always show up.
You can put that Javascript either in <script> tags in your template’s header.php or put it in a file and enqueue it in your functions.php
Basically, change #my_fixable_table_header in the javascript to your own id, which would be #header #searchbar and change the myHeader.addClass(‘fixed’) to something like myHeader.addClass(‘scroll-shadow’)
Add a class to your CSS called .scroll-shadow (which you’re now adding a class for based on your scrolling) and put your box-shadow in there. Make sure to remove it otherwise from your #header #searchbar.
You can check the answer in that link to see a working example to toy around with.
I’ve done everything above. I added the code to my header.php with script tags, then I made the changes to the code that you said to do and then added the css class. I’m not sure what you mean by “(which you’re now adding a class for based on your scrolling)” but it is not working. Not sure what I did wrong…
