One, dependencies: referencing the jquery framework
Main points: $ (window). Scroll (function () {//Judge $ (this). ScrollTop () is greater than the height of the top of a div});
Third, Code:
<! DOCTYPE Html> <HTML> < Head> <title> Navigation and Positioning </title> <Metacharset="Utf-8"> <MetaName="Generator"Content="EditPlus"> <MetaName="Author"Content=""> <MetaName="Keywords"Content=""> <MetaName="Description"Content=""> <ScriptSrc="Jquery.min.js"></Script> </ Head> <styleType="Text/css"> * {margin:0px; padding:0px;
font-family: ' Microsoft Ya-hei '; } div {height:400px; Border:1px Solid Red; width:600px; } UL {overflow:Hidden; Positionfixed; top:300px; left:650px; } li {width:40px; Height:40px;
Background: #3F883E; Text-align:Center; Line-height:40px;
Color: #fff; , font-size:18px; CursorPointer; Border-bottom:1px Solid#fff; } li.active {width:38px; height:38px; Margin-bottom:1px; Border:1px Solid#3F883E;
Background: #fff;
Color: #666; } </style> < Body> <Divclass="Div1"> Paragraph 1</Div> <Divclass="Div2"> Paragraph 2</Div> <Divclass="Div3"> Paragraph 3</Div> <Divclass="Div4"> Paragraph 4</Div> <Divclass="DIV5"> Paragraph 5</Div> <Divclass="Div6"> Paragraph 6</Div> <Divclass="DIV7"> Paragraph 7</Div> <ul> <Liclass="Li1 Active">1</Li> <Liclass="Li2">2</Li> <Liclass="Li3">3</Li> <Liclass="Li4">4</Li> <Liclass="Li5">5</Li> <Liclass="Li6">6</Li> <Liclass="Li7">7</Li> </ul> <ScriptType="Text/javascript">/* Rolling monitor//define a height of the range of all div var arroffsettop = [$ ('. Div1 '). Offset (). Top, $ ('. Di
V2 '). Offset (). Top, $ ('. Div3 '). Offset (). Top, $ ('. Div4 '). Offset (). Top, $ ('. Div5 '). Offset ().
$ ('. Div6 '). Offset (). Top, $ ('. Div7 '). Offset (). Top];
Gets the average height of each div var ftotalhgt = 0;
for (Var i=0 i<$ (' div '). length; i++) {ftotalhgt + = $ (' div '). EQ (i) outerheight ();
var faveragehgt = parsefloat (FTOTALHGT/$ (' div '). length); Scrolling events (each scrolling is done in a circular judgment) $ (window). Scroll (function () {for (Var i=0; i<$ (' div '). length; i++) {i F ($ (this). ScrollTop () > Arroffsettop[i]-faveragehgt) {//minus a fixed value, is locating the exact point $ (' ul Li '). EQ (i) addclass (' A
Ctive '). Siblings (). Removeclass (' active ');
}
}
});
/* Click event * * (' ul li '). Click (function () {$ (this). addclass (' active '). Siblings (). Removeclass (' active '); $("Body, HTML"). Animate ({scrolltop:arroffsettop[$ (this). Index ()]}, 500);
}); </Script> </ Body> </HTML>Four, the effect chart:
Summarize:
This is a scrolling listener event effect, attached to a click-through listener, for reference only, copy available
If you have questions, please leave a message for resolution.
Thank you for your attention.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
