Effect Description: Click Tab navigation, the page slides to the corresponding section below. And when the page scrolls down through the mouse, the tab above can automatically switch to the current position of the plate.
Code Description: JS in the two actions are written, one is the tab click Down to the corresponding plate position; One is the mouse scroll down when the tab determines the current page scrolling height toggle tab.
Js:
$ (document). Ready (function(){ $('. Switch-tab>li '). Click (function(){ vars=$ ('. Switch-tab>li '). Index ( This); $(' body,html '). Animate ({scrolltop:$ ('. Tab-content>.tab-panel:eq (' +s+ ') '). Offset (). top-50},200); }); vardt=$ ('. Switch-tab ')). Offset (). Top; $ (window). Scroll (function(){ varwt=$ (window). scrolltop (), l=$ ('. Tab-content>.tab-panel '), s=l.length-1; if(wt<dt| | Wt>=l.last (). Offset (). Top+l.last (). Height () +50){ $('. Switch-tab '). Removeclass (' fixed '); $('. Switch-tab>li:first '). addclass (' active '). Siblings (). Removeclass (' active '); }Else{ $('. Switch-tab '). addclass (' fixed '); for(vari=0;i<s;i++){ if(Wt>=parseint (L.eq (i). Offset (). top-50) &&wt<parseint (L.eq (i+1). Offset (). top-50) ) {s=i; Break; } } $('. Switch-tab>li:eq (' +s+ ') '). addclass (' active '). Siblings (). Removeclass (' active '); } });});
Html:
<Divclass= "Switch-nav"> <ulclass= "Switch-tab"> <Li><ahref= "javascript:; ">Rato wine</a></Li> <Li><ahref= "javascript:; ">French Winery Style</a></Li> <Li><ahref= "javascript:; ">Red wine Packaging</a></Li> <Li><ahref= "javascript:; ">Personalized Customization</a></Li> </ul></Div><Divclass= "Tab-content"> <Divclass= "Tab-panel"ID= "Cpxq">1111</Div> <Divclass= "Tab-panel"ID= "Cpxq">222</Div> <Divclass= "Tab-panel"ID= "Cpxq">333</Div> <Divclass= "Tab-panel"ID= "Cpxq">444</Div></Div>
jquery handwriting for single-page scrolling navigation