CODEWITHSUNDEEP
jqueryhtmlcss
user4920811
user4920811

Reputation:

showing the div with waste vertical space when I click on the 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 is 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 the title1 (link), the related div is displayed in the top of page, under the header (because header is fix).

here is my output: (when I click on the title1)

+-----------------------------------------------------------------------+
|                                                                       |
|                      header {position: fixed;}                        |
|_______________________________________________________________________|
|   title2: here is a explanation ...                                   |
|                                                                       |
|                                                                       |
|   title3: here is a explanation ...                                   |
|                                                                       |
|                                                                       |
|                                                                       |
|                                                                       |
|                                                                       |
|                                                                       |
|                                                                       |
|                                                                       |
|                                                                       |
+-----------------------------------------------------------------------+

While 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 that ?

Edit:

here is my fiddle .

Upvotes: 3

Views: 47

Answers (3)

taco
taco

Reputation: 1383

You might need to handle this via Javascript.

Here is a demo how to do this: http://jsfiddle.net/h2020bpn/3/

Here is an example using jQuery, so it will work cross browser. You could easily re-use this code to fit your purpose.

This uses jQuery's .scrollTop() method:

Set the current vertical position of the scroll bar for each of the set of matched elements.

Upvotes: 0

Strelok
Strelok

Reputation: 51461

You need to wrap your content with a div and make fixed position as well 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/

Upvotes: 2

Jamie Butler
Jamie Butler

Reputation: 395

You can and probably should do this with styling.

You want to add a padding to the top of your body element, equal to the height of your banner. Then you need to set your banner's coordinates, so they're relative to the HTML element instead of the body element.

This should be in a stylesheet, but just editing what you have there (assuming your banner is 50px):

<body style="padding-top: 50px;">
    <div id="header" style="position: fixed; top: 0px; left: 0px;>header</div>
...
</body>

Upvotes: 0

Related Questions