Solved

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

Posted on 2015-02-15
2
83 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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Download a website to hdd 2 49
jQuery not working on ELSE... why? 2 21
Change CSS to show Notification Bar 9 17
push logos in footer up higher 5 3
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

911 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now