Search code examples
htmlheaderscrollhidetransparent

Hide Scrolling Content Under Transparent Header

Alright, I've gone nuts looking for an answer. This is simple, I know it.

I have a fixed transparent header at the top of my page. When I scroll I want the body content to scroll under it but not be seen through the header div. I've seen similar posts but nothing that helps me with my case. Appreciate any hints or cues that could help out. Thanks!

Example below: thnki.com/hosting/sycamore

Solution

  • You will either need to:

    • make a non transparent image that looks the same as it is now,
    • create a div for the lower part of the page (directly under/after the header) that has its own overflow style setting, which will cause the scrollbar to be only part of the page
    • or just enjoy that super awesome transparency-overlay effect you're getting.

    i like it how it is actually