method of using Sticky Component to implement tab navigation and scrolling navigation with sticky effect _javascript skill

A sticky component, usually applied to a navigation bar or toolbar, that uses elements such as navigation bars or toolbars at the top or bottom of a page when scrolling in an area, making it easy for users to quickly perform the actions provided by such elements.

In this article, the improved implementation of the sticky component provides an improved version of the sticky component and applies the demo effect to your blog. With this simple component like sticky, we can use it to develop richer results, such as the tab navigation and scrolling navigation that this article describes. Simple to implement, the demo effect is as follows:

tab navigation (corresponds to tab-sticky.html):

Scrolling navigation (corresponding to nav-scroll-sticky.html):

1. Tab Navigation Implementation

tab navigation requirements are: Click on the navigation items, in addition to switching tab content, but also to control scrolling, the tab content will be displayed at the top, and to just show the sticky elements in the bottom. Because the demo is done with Bootstrap, Bootstrap provides a very simple tab component, we can in the tab component provided by the Shown.bs.tab event callback in the rolling control process, so this effect is easier to implement:

<script>
var $target = $ (' #target ');
New Sticky (' #sticky ', {
unstickydistance:60,
target: $target,
wait:1,
isfixedwidth:false,
Getstickywidth:function ($elem) {return
$elem. Parent () [0].offsetwidth;
}
});
$ (' a[data-toggle= tab '] '). On (' Shown.bs.tab ', function (e) {
window.scrollto (0, $target [0]. Getboundingclientrect (). Top + getpagescrolltop () + 1);
};
function Getpagescrolltop () {return
Window.pageyoffset | | document.documentElement.scrollTop | | Document.body.scrollTop;
}
</script>

HTML structure:

2. Scrolling navigation implementation

Scrolling navigation is relatively troublesome, the tab component will only display the tab content corresponding to the currently active tab, while scrolling navigation, all content to be navigated is already rendered in the page, and its demand is:

1 Click on the navigation items, Control page scrolling, automatically with the click of the navigation items corresponding to the content of the top display, and to just show the sticky elements in the bottom;

2 when the page scrolls, the active style is automatically added to the corresponding navigation items according to the navigation content currently displayed.

Although it may sound complicated, the implementation in the demo is still relatively easy:

<script> var $sticky = $ (' #sticky ');
var $target = $ (' #target '); New Sticky ($sticky, {unstickydistance:60, target: $target, Wait:1, Isfixedwidth:false, Getstickywidth:function ($elem
{return $elem. Parent () [0].offsetwidth;}});
var offsettop = 60; Implement the effect of clicking tab to automatically scroll to navigation content $sticky. On (' Click ', ' a ', function (e) {e.preventdefault (); var $this = $ (e.currenttarget); var $pa
Rent = $this. Parent ();
if ($parent. Hasclass (' active ')) return;
$sticky. Find (' li.active '). Removeclass (' active ');
$parent. addclass (' active '); var target = $this. Data (' target ') | |
$this. attr (' href ');
var $target = $ (target);
Window.scrollto (0, Math.floor ($target [0].getboundingclientrect (). Top) + getpagescrolltop ()-offsettop);
}); /** * Math.floor is to resolve rect.top or rect.bottom with decimal problems///implementation scrolling automatically adds an active style $ (window) to the corresponding navigation items according to the navigation content currently displayed. Scroll (Throttle ( function () {var $curItem = $sticky. Find (' a '). Filter (' [href= ' + getcurtarget () + '] '); var $parent = $curItem. Parent (); if (
$parent. Hasclass (' active ')) return; The final blur is to remove: aCtive and: The style of the focus pseudo class $sticky. Find (' li.active '). Removeclass (' active '). Find (' a '). Trigger (' blur ');
$parent. addclass (' active ');
},1));  Gets the ID function of the navigation content element that is currently displayed Getcurtarget () {for (var targets = [' #First ', ' #Second ', ' #Third '], i = 0, L = targets.length; I < L; i++) {var currect = $ (targets[i]) [0].getboundingclientrect (); if (Math.floor (currect.top) <= offsettop &&
Math.floor (Currect.bottom) > offsettop) {return targets[i];}
return targets[0]; function Getpagescrolltop () {return Window.pageyoffset | | document.documentElement.scrollTop | |
Document.body.scrollTop;  }//This function should be extracted in the actual work, otherwise sticky.js inside also has a duplicate function throttle (func, wait) {var timer = null; return function () {var self
= this, args = arguments;
if (timer) cleartimeout (timer);
Timer = settimeout (function () {return typeof func = = ' function ' && func.apply (self, args); }} </script>

HTML structure:

3. Summary

This article combines the sticky component, provides 2 kinds of navigation effect realization, compatible ie9+,firefox and the chrome, interested can download the source code to have a detailed understanding. In the implementation of tab navigation, because there is a BS tab component is very easy to achieve, there is no need to sticky and tab components to be packaged up to form a new component, after all, the effect of the implementation code has been relatively simple. When you implement a scrolling navigation, because the tab component is not used, the two demand points for scrolling navigation are implemented separately, in reality, these two functions can be encapsulated into 2 separate components or 1 components, so that the implementation code can be written as simple as tab navigation, However, this article does not go further to introduce the two components of the writing, because this is not the main content of this article, although I would like to do so, the follow-up will certainly write a blog to introduce these two components, simple things do not build a wheel, is simply a waste of opportunity. In achieving these two effects, there are also 2 points to harvest:

1 Firefox and IE, first let the page, and then refresh, although the page will also be displayed in the refresh location, but will not trigger the scroll event, so the future to do scroll related components, must be in the component initialization when the initiative off a scroll related callback;

2 Getboundingclientrect Returns the value of the Rect object, in IE and Firefox, may be decimal, For example, 60.2222299999, such a number, in the judgement may be inconsistent with the expected situation, resulting in some unexpected bugs, if not particularly rigorous, you can use Math.floor to the value of these values to be rounded, and then used to calculate or judge. For example, in the scrolling navigation implementation, the value of the Rect.top value 60.2222299999,offsettop is 60, the expectation is currect.top <= offsettop This condition can be set up, because of the decimal reason, so it is not tenable.