Skip to:
Content
Pages
Categories
Search
Top
Bottom

Header bottom shadow upon scrolling.

  • Avatar of Joe LeBeau
    Joe LeBeau
    Participant

    @joelebeau

    Hi, the title pretty much sums it up. I have a FIXED position shadow on the bottom of my FIXED position header right now, but I only want it to show up when the user scrolls down the page and when he scrolls back up to the top of the page, the shadow will disappear. Any help greatly appreciated! Thanks- Joe.

    WEBSITE FOR REFERENCE: teen-ship.com
    I’m using the newest version of wordpress. And I am using a child theme (code mostly taken from the frisco theme)

    CSS I used to get the static shadow under the hearder:
    #header #searchbar {
    box-shadow: 0 0 6px;
    }

Viewing 4 replies - 1 through 4 (of 4 total)
  • Avatar of Tecca
    Tecca
    Participant

    @tecca

    It seems to be working on my end with the latest versions of Firefox, IE, Chrome, and Opera. Are you still experiencing this problem?

    Avatar of Joe LeBeau
    Joe LeBeau
    Participant

    @joelebeau

    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.

    Avatar of Tecca
    Tecca
    Participant

    @tecca

    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.

    Avatar of Joe LeBeau
    Joe LeBeau
    Participant

    @joelebeau

    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…

Viewing 4 replies - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.