Raheel Khan Raheel Khan - 12 days ago 5
CSS Question

Div to display if table of contents is not within scroll view

I have a long HTML5 help document with a table of contents at the top. When the page is scrolled and the table is no longer visible, I want to display a floating div containing a link to the table:

<div id="DivTableOfContentsLink">
<a href="#TableOfContents">
Table of Contents
</a>
</div>


Is it possible to achieve this sing CSS only (without JavaScript)?

Answer
#DivTableOfContentsLink {
    width: 100px;
    position: fixed;
    right: 20px;
    top: 20px;
}

demo: http://jsfiddle.net/WE7n5/

you need set position to fixed so you can fixed it to the viewport (set right/left and bottom/top)

https://developer.mozilla.org/en-US/docs/Web/CSS/position

Comments