CSS - Scroll content under fixed positioned element?

Question

HTML:

<div id="container">
    <ul>
        <li><a href="#first">first</a></li>
        <li><a href="#second">second</a></li>
        <li><a href="#third">third</a></li>
    </ul>
    <div id="somecontainer">
        <div id="first">
        </div>
        <div id="second">
        </div>
        <div id="third">
        </div>
    </div>
</div>

DEMO: http://jsfiddle.net/JRnDz/

PROBLEM: When you click on link named "second", the page should jump to the div with id "second". However, it will not display entire div, but just some part of it (150px-50px=100px). The top of the div gets cut off.

QUESTION: How can I display the entire div after clicking the "second" link?

WHAT I HAVE TRIED: Adding relative positioning and top: 50px to the container:

#container {
  position: relative;
  top: 50px;
}

score 2 · Answer 1 · answered Feb 12 '13 at 12:51

2

The solution written by @ipsnow72 is the more clear.

If you prefer, you can use jquery's plugin ScrollTo and use the offset parameter. http://demos.flesler.com/jquery/scrollTo/

$(...).scrollTo( '#yourelement', {offset:-50} );

answered Feb 12 '13 at 12:51

Fez Vrasta

14,110
21
98
160

As I replayed to ipsnow72 answer: "It doesn't work". So its not solution for me.. As for the jQuery, I ll add it later, right now I need to get this problem solved. – RhymeGuy Feb 12 '13 at 12:53

score 2 · Answer 2 · answered Feb 12 '13 at 13:35

2

It depends what is the use of this code, but if you add

#someconteiner div{
    padding-top:50px;
    margin-bottom:-50px;
    position:relative;
    display:block;
}

and play a bit with z-indexes it works: http://jsfiddle.net/JRnDz/2/

answered Feb 12 '13 at 13:35

Jan

689
1
6
22

jpsnow72 · Answer 3 · 2013-02-12T12:55:38.733

1

You could try this:

<div id="container">
<ul>
    <li><a href="#first">first</a></li>
    <li><a href="#secondJump">second</a></li>
    <li><a href="#third">third</a></li>
</ul>
<div id="someconteiner">
    <div id="first">
    </div>
    <a name="secondJump"></a>
    <div id="second">
    </div>
    <div id="third">
    </div>
</div>
</div>

Put the location that you want to jump to as an anchor just above the div that you want to jump to.

Obviously you would do the same for 1st and 3rd.

EDIT: Try simply removing fixed position from your ul

edited Feb 12 '13 at 12:55

answered Feb 12 '13 at 12:34

jpsnow72

965
2
15
45

Tried. Its same effect as before. – RhymeGuy Feb 12 '13 at 12:42
Does the ul need to be fixed? That is your problem. I updated your jsfiddle – jpsnow72 Feb 12 '13 at 12:47

score 0 · Answer 4 · edited May 23 '17 at 12:22

How about this:

<div id="container">
<ul>
    <li><a href="#first">first</a></li>
    <li><a href="#secondAnchor">second</a></li>
    <li><a href="#third">third</a></li>
</ul>
<div id="someconteiner">
    <div id="first">
    </div>
    <a name="secondAnchor" style="padding-top: 50px; margin-top: -50px;"></a>
    <div id="second">
    </div>
    <div id="third">
    </div>
</div>
</div>

See: Fixed position navbar obscures anchors

CSS - Scroll content under fixed positioned element?

4 Answers4