CODEWITHSUNDEEP
jqueryhtmlcss
user2794426
user2794426

Reputation:

How to hide the content inside body in html5?

I have very long content in my page. Also my menu header is transparent with text over it. So, if i scroll the page, the whole content should be hidden behind the menu header. The content should not be seen through this header. My menu header should be transparent. How to do this? 

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

.content{
    margin-top:65px;    
}

JSFIDDLE

Upvotes: 3

Views: 213

Answers (6)

Dimitri Mestdagh
Dimitri Mestdagh

Reputation: 44665

What you want to do is to make the content container fixed. When it's fixed, the element itself cannot be scrolled (because it's fixed on the window). Then you can define the offset using the CSS top and bottom attributes.

The CSS would become 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's a lot of content */
    overflow: auto;
}

I also updated your JSFiddle.

Update

Based upon your comment I can tell you that it's actually impossible to do that only with CSS. The reason for this is that you should see these DOM nodes as layers. What you want is that a part of the layer becomes invisible (the text) while the other part (the background) isn't, but you can only say that you want to do the entire set (background + text) or none.

The only way to do this is by using JavaScript. You could emulate the scroll behavior by updating the background-position attribute of the body. For example by doing:

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

What this actually does is that when the .content is scrolled, the amount of pixels that is scrolled is also used to move the background, keeping them "synchronous".

I also updated your JSFiddle to demonstrate this.

Update 2

According to the comments you want to put the scrollbar over the entire page, so let me say this once again: DOM nodes are layers, if you want the scrollbar over the entire page, then the text is also over the entire page. There's no other way around it (it's common sense).

If you really want the scrollbar over the entire page and don't see the text, then it's quite simple: remove the transparency of the header. If you want the piece of background behind it, then you will have to put a <div> behind the header and with JavaScript move the background position (only on the piece behind the header). That new <div> would have no transparency and should be above the text layer. That means the header will not be entirely transparent so the text won't be visible.

But really, you should consider if you actually want to do this. It's a lot of work + code just for a small piece of UI behavior. I don't think it's a good practice to put all that JavaScript there for just that. I don't even think it's a good UI practice to do what you want, but if you really want it, well, I just told you how to do it, but here it also stops. I'm not going to write that piece of code for you, you have a base to start of so now you can continue.

Upvotes: 1

Prashobh
Prashobh

Reputation: 9542

You have to set overflow and maximum height to your .content class (no need to remove opacity )

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

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

Upvotes: 2

James Donnelly
James Donnelly

Reputation: 128781

i can't remove opacity coz in my real project there is colorful image in the background

If your background image itself is transparent, you can specify a background-color alongside your image so that your element still has a solid background underneath:

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

Or simply:

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

Upvotes: 1

Senthilmurugan
Senthilmurugan

Reputation: 383

Remove Opacity:

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

Upvotes: 1

Bharat soni
Bharat soni

Reputation: 2786

Update the css like below 

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

.content{
    margin-top:65px;    
}

i have already updated here and it is working here.

updated jsfiddle

Upvotes: 1

Yogesh
Yogesh

Reputation: 4784

remove the property opacity or make opacity:1;

Upvotes: 2

Related Questions