jquery - How to hide the content inside body in html5? -

In my page I have very long content, besides my menu header, it is transparent with text. Therefore, if I scroll the page, then the entire contents should be hidden behind the menu headers. The content should not be seen from this header. My menu header should be transparent. How to do it?

  // code. Navbar-fixed-top {background-color: yellow; Height: 60px; Text-align: center; Font-size: 40px; Opacity: 0.7; }. Content {margin-top: 65px; }    
   
 
 
 What do you want to do The content is to make the container  fixed  when it is fixed, the element can not be scrolled (because it is fixed on the window). You can then define offset using CSS  top  and  below  attributes  
 CSS will become something like this:  < Pre class = "lang-css prettyprint-override">  .content {/ ** full offset from top * / head: 65px; / ** ensures that the content element can not be self-scrolling (thus it can not be behind the header) * / status: fixed; / ** offset * / bottom from the bottom of the screen: 0; / ** Show a scrollbar when there is too much content * / overflow: Auto; }   
 I have also updated your  
 
 update  
 Depending on your comment, I can tell you that this is really impossible to do. The reason with CSS is that you have to dump these dom nodes Should look as. What do you want is that a part of the layer is invisible (text) while the second part is not (background), but you can only say that you want to do the whole set (background + text) or anybody.  
 The only way to do this is by using Javascript you can simulate the scroll behavior by updating the  backdrop position  by changing the attribute of the  body  . For example:  
  $ ("content"). Scroll (function () {$ ("body"). CSS ("background-setting", "0 -" + $ (this) .scrollTop () + "px");});   
 What exactly is that when the  .content  is scrolled, the volume of scrolled pixels is also used to move the background Is, "synchronous" to them  
 I also updated you to display it.  
 
 Update 2  
 According to the comments, if you want to enter the scrollbar across the page, then say this one more time: DOM nodes are layers, if you scrollbar across the page If you want, the text is also on the whole page. There is no other way around it (this is common sense).  
 If you really want a scrollbar on the whole page and do not see the text, then it is very easy: Remove the transparency of the header. If you want a piece of background behind it, then you have a  & lt; Div & gt;  and have to move the background position with Javascript (only on the back of the header), this new  & lt; Div & gt;  will have no transparency and should be above the text layer, meaning that the title will not be completely transparent, so the text will not be visible.  
 But in reality, you should consider whether you really want to do this. It's a lot of work + code just for a small piece of UI behavior I do not think it's just that there is a good practice to put all JavaScript there. I do not even think that it is a good UI practice to do as you wish, but if you really want to, well, I told you how to do this, but here also it stops. I am not going to write that piece of code for you, you have the basis for starting, so you can continue now.