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.
The Sticky navigation component is shown when you scroll down the page, like below.
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.
The Html code of this component 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.
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.
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.
Initialize sticky layer to show it
If the Sticky Navigation's status is hidden, set the attributes and inner Html and show it.
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.
The style sheet of this component is below.
This Style Sheet defines design of the shown sticky layer.