CSS - Scrolling content over a fixed positioned element?
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 the "second" link, the page should navigate to the div with the id "second". However, it does not display the entire div, but only part of it (150px-50px = 100px). The top of the div is cut off.
Question: How can I display the entire div after clicking the "second" link?
WHAT I AM EXCLUDING: Adding relative positioning and vertex: 50px to the container:
#container {
position: relative;
top: 50px;
}
source to share
The solution written by @ ipsnow72 is more obvious.
If you prefer, you can use the jquery plugin ScrollTo and use the offset parameter. http://demos.flesler.com/jquery/scrollTo/
$(...).scrollTo( '#yourelement', {offset:-50} );
source to share
It depends on using this code, but if you add
#someconteiner div{
padding-top:50px;
margin-bottom:-50px;
position:relative;
display:block;
}
and play around a bit with z-indices: http://jsfiddle.net/JRnDz/2/
source to share
You can 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>
Place the location you want to jump to as an anchor above the div you want to jump to.
Obviously, you will do the same for 1st and 3rd.
EDIT: Try to just remove the fixed position from your ul
source to share
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>
source to share