Hide scrollable content behind transparent fixed position divs when scrolling the page?

by

Just coming to this late, but in case anyone else runs across this in the future, here’s your fix.

Your CSS Code:

.wrapper {
    width:100%;
    position:fixed;
    z-index:10;
    background:inherit;
}

.bottom-wrapper {
    width:100%;
    padding-top:92px;
    z-index:5;
    overflow:auto;
}

Your HTML:

<div class="wrapper">
    ...your header here...
</div>
<div class="bottom-wrapper">
    ...your main content here...
</div>

This will provide you with a header that cleanly matches your site, and floats at the top. The main content will scroll free of the header, and disappear when it passes the header.
Your .bottom-wrapper padding-top should be the height of your header wrapper’s content.

Cheers!

More Related Contents:

  1. Fixed position but relative to container
  2. Position element fixed vertically, absolute horizontally
  3. parent & child with position fixed, parent overflow:hidden bug
  4. Fixed element disappears in Chrome
  5. Float right and position absolute doesn’t work together
  6. Disable zoom on a div, but allow zoom on the page (an alternate div)
  7. Set position absolute and margin
  8. Prevent content from expanding grid items
  9. Click through div to underlying elements
  10. Position deeply nested elements in a higher level grid container
  11. Why don’t :before and :after pseudo elements work with `img` elements? [duplicate]
  12. CSS Property Border-Color Not Working
  13. Browsers’ default CSS stylesheets
  14. HTML 5 strange img always adds 3px margin at bottom [duplicate]
  15. CSS: center element within a element
  16. How to create a curve on the top of a background?
  17. What is the current state of the “scoped” attribute for the style element in HTML5?
  18. Does IE 8 have a limit on number of stylesheets per page?
  19. How can I include css files using node, express, and ejs?
  20. Replace input type=file by an image
  21. How to make a circle around content using CSS?
  22. Remove all padding and margin table HTML and CSS
  23. How do I set distance between flexbox items?
  24. Align text to the bottom of a div
  25. Nginx failing to load CSS and JS files (MIME type error)?
  26. Do I not understand the flex-grow property?
  27. click link below a higher z-index div [duplicate]
  28. Is there a way to style HTML5’s range control?
  29. Keep background image fixed during scroll using css
  30. How to keep :active css style after clicking an element

Leave a Comment