Raheel Khan Raheel Khan - 1 year ago 69
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

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

Answer Source
#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)


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download