Solved

Need to make "sticky link" to Table of Contents in a book page

Posted on 2015-02-15
2
90 Views
Last Modified: 2015-02-20
We are developing a new view for outputting pages from inside inflated epubs to static html pages

please see:

http://dev.himalayanacademy.com/html/manager/templates/tmpl-single-book-page.html

One requirement I've been tasked with is to try to make the "Table of Contents" link at the top, stick to the window. i.e. as the user scrolls up the div that contains the link (which open a  light view) will stick to the top of the screen.

I searched for a solution and plugged in a small JS (jquery) and wrapped the link in div to target. but it does not work.

I am out of my depth here... probably very, but I don't know what do.  Hope you can help.
0
Comment
Question by:Brahmanatha
2 Comments
 
LVL 30

Accepted Solution

by:
Alexandre Simões earned 500 total points
ID: 40611331
This is called "Sticky Header".
Here's a nice Code Pen example: http://codepen.io/senff/pen/ayGvD
0
 

Author Comment

by:Brahmanatha
ID: 40622198
Excellent. I used that code and it worked out of the box!
0

Featured Post

Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

685 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question