Showing div with vertical waste space when i click on link
here is my structure :
+-----------------------------------------------------------------------+
| |
| header {position: fixed;} |
|_______________________________________________________________________|
| |
| title1 | title2 | title3 |
| |
| |
| |
| tile1: here is a explanation ... |
| |
| |
| title2: here is a explanation ... |
| |
| |
| title3: here is a explanation ... |
| |
+-----------------------------------------------------------------------+
here are my codes :
<div id = "header">header</div>
<a href="#title1">title1</a>
<a href="#title2">title2</a>
<a href="#title3">title3</a>
<div id="title1">tile1: here is a explanation ...</div>
<div id="title2">tile2: here is a explanation ...</div>
<div id="title3">tile3: here is a explanation ...</div>
Now when I click on a link title1
(link) the corresponding div is displayed at the top of the page under the heading (since the heading is a fix).
here is my output : (when i click on header1)
+-----------------------------------------------------------------------+
| |
| header {position: fixed;} |
|_______________________________________________________________________|
| title2: here is a explanation ... |
| |
| |
| title3: here is a explanation ... |
| |
| |
| |
| |
| |
| |
| |
| |
| |
+-----------------------------------------------------------------------+
For now, I want this output:
+-----------------------------------------------------------------------+
| |
| header {position: fixed;} |
|_______________________________________________________________________|
| title1: here is a explanation ... |
| |
| |
| title2: here is a explanation ... |
| |
| |
| title3: here is a explanation ... |
| |
| |
| |
| |
| |
| |
+-----------------------------------------------------------------------+
How can i do this?
Edit:
here is my fiddle .
You need to wrap your content with div
and make a fixed position without resorting to JS:
HTML:
<div id="header">header</div>
<div id="content">
<ul class="nav">
<li><a href="#title1">title1</a></li>
<li><a href="#title2">title2</a></li>
<li><a href="#title3">title3</a></li>
</ul>
<div id="title1">tile1: here is a explanation ...</div>
<div id="title2">tile2: here is a explanation ...</div>
<div id="title3">tile3: here is a explanation ...</div>
</div>
CSS
#header {
background-color: lightGrey;
padding: 10px;
height: 80px;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
#content {
background-color: Grey;
position: fixed;
top: 100px;
left: 0;
width: 100%;
bottom: 0;
overflow-y: scroll;
}
For illustration see this fiddle: http://jsfiddle.net/tmvmazdg/3/
source to share
You may need to handle this through Javascript.
Here's a demo how to do it: http://jsfiddle.net/h2020bpn/3/
Here is an example using jQuery so it will work cross browser. You can easily use this code for your purpose.
In this case, the jQuery method is used . scrollTop () :
Set the current vertical position of the scroll bar for each of the set of matched elements.
source to share
You can and probably should do this with style.
You want to add padding to the top of your body element equal to the height of your banner. Then you need to set the coordinates of your banner, so they refer to the HTML element instead of the body element.
This should be in your stylesheet and just edit what you have (assuming your banner is 50px):
<body style="padding-top: 50px;">
<div id="header" style="position: fixed; top: 0px; left: 0px;>header</div>
...
</body>
source to share