Geek asks and answers

How to hide content inside body in html5?

I have very long content on my page. Also my menu title is transparent with text on top of it. Therefore, if I browse the page, all content should be hidden behind the menu title. Content should not be viewed through this header. My menu title 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;    
}

JSFIDDLE

+3
source share
6 answers

What you want to do is create a content container fixed. When it is fixed, the element itself cannot be scrolled (because it is fixed in the window). You can then determine the offset using the CSS topand attributes bottom.

CSS will look something like this:

.content {
    /** Absolute offset from the top */
    top: 65px; 
    /** Makes sure the content element itself cannot be scrolled (that way it can't get behind the header) */
    position: fixed;
    /** Offset from the bottom of the screen */
    bottom: 0;
    /** Show a scrollbar when there a lot of content */
    overflow: auto;
}

JSFiddle.

Update

, , CSS. , DOM . , (), () - , , ( + ) .

- JavaScript. , background-position body. , :

$(".content").scroll(function() {
    $("body").css("background-position", "0 -" + $(this).scrollTop() + "px");
});

, , .content , "".

JSFiddle, .

2

, , : DOM - , , , ( ).

, : . , <div> , JavaScript ( ). <div> . , , .

, , . + . , , JavaScript. , , , , , , , . , , .

+1

opacity opacity:1;

+2

.content ( )

.content{
     margin-top:60px;
    overflow-y:auto;
    max-height:400px; // your choice 
  }

http://jsfiddle.net/prash/S8bS4/4/

+2

css,

//code
.navbar-fixed-top{
    background-color:yellow;   
    height:60px;
    text-align:center;
    font-size:40px;
    }

.content{
    margin-top:65px;    
}

.

jsfiddle

+1

:

.navbar-fixed-top{
    background-color:yellow;   
    height:60px;
    text-align:center;
    font-size:40px;
    /*opacity:0.7;*/
}
+1

I cannot remove opacity coz in my real project, there is a colorful image in the background

If your background image is transparent, you can point background-colornext to your image so that your element still has a solid background at the bottom:

.navbar-fixed-top {
    background-color: #fff; // White
    background-image: url(...);
}

Or simply:

.navbar-fixed-top {
    background: #fff url(...);
}
+1
source

More articles:


All Articles