Example: Web page scrolling positioning navigation

Now most of the site is a page will show a lot of information, avoid the second click, can reduce the loss of information. Today wrote one, first look at the final

is implemented with jquery, the code is very simple, suitable for beginners to learn.

First or the interface HTML:

1 <Divclass= "NAV">2         <ul>3             <Li><ahref= "#floor1"class= "Current">Floor_1</a></Li>4             <Li><ahref= "#floor2">Floor_2</a></Li>5             <Li><ahref= "#floor3">Floor_3</a></Li>6             <Li><ahref= "#floor4">Floor_4</a></Li>7             <Li><ahref= "#floor5">Floor_5</a></Li>8         </ul>9     </Div>Ten     <Divclass= "Floor"ID= "Floor1"> One         <P>This is the first plate</P> A         <ul> -             <Li><imgsrc= "01.jpg"></Li> -             <Li><imgsrc= "01.jpg"></Li> the             <Li><imgsrc= "01.jpg"></Li> -             <Li><imgsrc= "01.jpg"></Li> -             <Li><imgsrc= "01.jpg"></Li> -             <Li><imgsrc= "01.jpg"></Li> +             <Li><imgsrc= "01.jpg"></Li> -             <Li><imgsrc= "01.jpg"></Li> +             <Li><imgsrc= "01.jpg"></Li> A         </ul> at     </Div>

here only the navigation section and the first plate of the HTML, the other plate of the same plate 1.

One thing to note here is that the address of the hyperlink is an ID that can be clicked on the same page and then linked to that part of the ID .

1 *{margin:0;padding:0;}2 . Floor{3 Border:1px solid #69f;4 width:880px;5 Height:600px;6 margin:50px Auto;7}8 Li{List-style:None;}9 img{Ten width:250px; One float: Left; A Border:1px dashed #f69; - margin:20px; -} the P{font-size:20px;font-family:Microsoft Ya-Black;Color:#c33;padding:5px 20px;} - . Nav{ - position:fixed; - width:120px; +  Left:1120px; - Top:200px; +} A . Nav Li a{ at padding:20px; - List-style:None; - text-align:Center; - Color:#318BFF; - cursor:Pointer; -} in . Nav Li a{text-decoration:None;Display:Block;} - . Nav. current{ to Background-color:#50CA65; + Color:#ff0; -} the . Nav Li A:hover{Background-color:#50CA65;Color:#ff0;}

This is the style part, do not introduce, just pay attention to.

The following is an important part of the jquery section, first to introduce the jquery library

1<script type= "Text/javascript" src= "Http://libs.baidu.com/jquery/1.10.2/jquery.min.js" ></script>2<script type= "Text/javascript" >3$ (document). Ready (function(){4$ (window). Scroll (function(){5             varfloors=$ (". Floor"));6             vartop=$ (document). ScrollTop ();7             varCurrentID = "";//Floor ID of the scroll bar where it is now located8Floors.each (function(){9                 vart=$ ( This);Ten                 if(Top>t.offset (). top-350) {//Note: T.offset (). Top stands for each floor position OneCurrentid= "#" +t.attr ("id");  A                 } -                 Else{ -                     return false; the                 } -             }); -             varcurrentlink=$ (". Nav"). Find (". Current")); -             if(CurrentID && currentlink.attr ("href")! =CurrentID) { +Currentlink.removeclass ("Current"); -$ (". Nav"). Find ("[href=" +currentid+ "]"). AddClass ("current"); +             } A         }); at     }); -</script>

The idea is that when the current scroll is detected to be greater than the specified PX value, the SRC address of the navigation hyperlink is switched, and then the style in the CSS is added.

Example: Web page scrolling positioning navigation