posted time Created time: 2015-03-08 posted time Last updated time:

Sticky Navigation part for Long Contents

When you do content based SEO, each content become longer than usual case. Then you will use links for named anchor.

Usage of content index in this website

In this website, it is used for main contents. They are long and have index part at the top of article body part.

Index part

It is very useful, because when you write a content, there are many opportunities when you divide it into multiple pages or not. But the page's usability is up to the content, and it have to cover much information for current theme as possible as we can.

It is appreciated by the search engines, therefore we have to think how to make the page useful, if the page become long.

Solution for long pages

Then the sticky index is useful. It appears on the left side of the page.

Sticky index navigation

As you scroll down the page, it marks current section of the page by bold styled font on the list. Therefore, you can recognize where you are reading.

It is especially useful when you come to the pages named anchor from a link, you can know what is written in the page by a glance. We can recognize next topics and previous topics soon.

And by clicking the link of the navigation, the page scrolls to the content's position.

How to use it

This part is included in the default set of the CMS template. The template of main contents contains it.

This CMS can graphically set the template's component.

The sticky navigation it self is made with Html5 Component. It contains Html, Javascript, and Stylesheet for it.

How does it work

This component is based on Javascript. It loads the index part's innerHTML, and put it into the navigation's div tag.

After that, by checking the scroll position, and mark up the list element which means current scroll position.


Go to Top