posted time Created time: 2015-07-04 posted time Last updated time:

Sticky Navigation Component for CMS template

Sticky Navigation part is to show the index of the article on the float div layer on the browser. In order to use this component, the Anchor Index component have to be located on the same template.

Appearance of Sticky Navigation Component

The Sticky navigation component is shown when you scroll down the page, like below.

Sticky Navigation

The Html code inside the layer is loaded from the index section, which is generated by Anchor Index Component.

If the section is not there, the component is not show.

This parts is for long pages like documentation pages. By setting this component, readers can recognize the summary of this page any time. Especially, when you use the anchor link to scroll down the specified position of the page, this component is useful.

More about the usage, please take a look at Sticky Navigation part for Long Contents.

Source code of Sticky Navigation

The source code of the Sticky Navigation is almost implemented by the Javascript. This component does not use server side program.

Html Code

The Html code of this component is below.

This code is just adding the layer of div tag. The Javascript manipulate the class and inner Html code of this div tag.

Javascript Code

The Javascript provides most of all functions of this component, the source code is below.

This source code does following operations.

Register call back functions

In this section, registering the call back function to the window object. The call back function is the "sticky()" function. When the scroll action occurred, the function is called.

This code is for Internet Explorer and Other Web browsers.

Declare variables

In the "sticky()" function, declare the variables to get  current scrolling status. The "scrollHumanTop" variable is margin height on detecting the current index by scrolling status.

Get Elements to add Html Code by Javascript

The div tag whose id is "sticky" is the layer of the Sticky Navigation component. When the div tag is not loaded, load it into the "stickeyElement" global variable.
In addition to the variable, also set the position and width of the layer.

Get current Scroll Status

After that, get current status of the scroll bar, and the default offset of the Sticky Navigation component. In addition to that, calculate available height of the client area.

The offset is used to decide to show the layer as float layer or not.

Show or Hide

This if statement decide to show the Sticky Navigation layer or hide it.

When the width of the screen device is more than 1000 pixels, and the scroll position is under the default offset of the div tag, the Sticky Navigation is shown as float layer.

Therefore, if you use smartphone or the width of the web browser is less than 100 pixels, the component is not shown.

Otherwise, hide the layer.

Load anchor index part's Html code

In order to show the index links list of the Anchor Index component, load the div tag's element into the variable.

If the component does not exists, stop the operation here.

Initialize sticky layer to show it

If the Sticky Navigation's status is hidden, set the attributes and inner Html and show it.

Set current index element of Anchor Index into the sticky layer by the Javascript

After showing the component, set the current element of the index as bold font. In order to calculate the current element, the "scrollHumanTop" variable is used.

After setting the current element, fix the position of the float layer, by considering the footer position.

Style Sheet

The style sheet of this component is below.

This Style Sheet defines design of the shown sticky layer.

Go to Top