Hide page content behind transparent header

Question

I have a fixed navbar using curved ribbon images that have transparent bits above and below the actual ribbon and I have a scaling full size background (so I can't make a navbar with a matching background at the top). I would like the page content to disappear behind the ribbon, halfway through the navbar as the user is scrolling.

It's the same problem as these two questions and the answers (which are good) aren't working for me.

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

Hide Scrolling Content Under Transparent Header

This is what I don't want:

http://imageshack.us/photo/my-images/213/badnr.jpg/

This is kind of what I want but without the scrollbars:

http://imageshack.us/photo/my-images/534/scrolled.jpg/

Thanks in advance for any help, it's greatly appreciated, this site has and will continue to teach me a lot.

Answer 1

The css z-index attribute should do the trick to place any element in front of or behind another element. Like so:

<style type="text/css">
 body, html {
margin:0 auto;
padding:0;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
 }
/* Header Styling */
 #header {
color:#FFF;
background: url(/images/header-back.png) repeat-x;
position:fixed;
top:0;
left:0;
width:100%;
height:50px;
z-index:1;
  }

#headerWrap {
width:1024px;
margin:0 auto;
height:50px;
}
/* Sub Header */
#subHeader {
position:fixed;
top:50px;
margin:0 auto;
z-index:1;
 }
 #subHeaderWrap {
height:30px;
width:830px;
border-bottom:thin solid #333;
background: url(../images/subheader.png) repeat-x;
  }
  /* Contaier */
  #container {
margin:0 auto;
width:1024px;   
min-height:600px;
   }
   #containerWrap {
margin-top:50px;

   }

   /* Menu */
  #sidebar {
float:left;
width:140px;
min-height:600px;
  }
  #content {
border-left:#333333 solid thin;
border-right:#333333 solid thin;
border-bottom:#333333 solid thin;
float:left;
width:830px;
min-height:600px;
padding-top:30px;
margin-bottom:10px;
  }
 #contentWrap {
width:830px;
margin:0 auto;
padding-bottom:10px;
 }
 </style>
<div id="container">
<div id="header" style="z-index:1;"/* Places div on top */">
This is transparent.
</div>

<div id="containerWrap">
    <div id="sidebar">
Menu Items Here
    </div>

<div id="content">
    <div id="contentWrap">

<div id="subHeader" style="z-index:1;"/* Places div on top */">
<div id="subHeaderWrap">
This div is transparent too, but is now on top.
</div>
</div>

Anything here is scrollable and will scroll under the divs above with z-index:1;


    </div>
</div>

Answer 2

I have found the solution you're looking for.

You're going to use a little Jquery and some CSS. I will assume you're loading the latest version of Jquery in your footer.

The header will be fixed, the elements inside it will be absolute. We will not focus on elements inside the header because that really doesn't matter for this, but if you were to put a menu and logo in the header you would make them absolute.

HTML Div with class header assigned or if you prefer you could just create a <header></header> element, whichever. But for this example we will use a class.

<div class="header">...Your Header Elements In this...</div>

CSS

body {background: url('../img/page-background.jpg') no-repeat top center fixed; background-size: cover;}
.header {position: fixed; top: 0; left: 0; width: 100%; height: 100px; background: transparent;}

JS - I use a seperate JS file and then load this after I've loaded Jquery in the footer.

$(window).scroll(function() {
 "use strict";
 var windowYmax = 1;
 var scrolledY = $(window).scrollTop();
   if (scrolledY > windowYmax) {
    $('.header').addClass("hide-content");
   } else {
    $('.header').removeClass("hide-content");
   }
});

Add this CSS for new class assigned:

.hide-content {background: transparent url('../img/page-background.jpg') no-repeat top center fixed; background-size: cover;}

Here is a JSfiddle: The Fiddle I was not able to get the JS to work in JSfiddle for some reason, maybe someone can fix that issue, but I don't really have the time to mess with JSfiddle much, but wanted to provide an example to the end result. So I just added the class that gets assigned by the JS to the div in the HTML and you can see the result in the preview pane.