Home > Developer > Web Develop
Recently, small-size elder brother in the company demand party requirements, to add an effect in a future theme page: That is, the sidebar navigation click to achieve the page content part of the movement to the corresponding location, as well as the body scroll bar scroll to make the navigation button effect and the corresponding content of the page an effect. At first, when the small brother to do, only the implementation of the click the navigation button to the page corresponding to the content of the corresponding to the button and the appropriate place (in this case, you can see the small brother of the article on the anchor Point previously written) , and with the scroll bar implementation of the button and the content of the corresponding effect did not do, due to the project of the time limit, small brother borrowed a case on the web, the set of its own page is enough to achieve the desired effect.
No more nonsense, go straight to the yard,,,,,,,,,,,
<!doctype html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<TITLE>JS control page up and down scrolling and the right floating navigation effect </title>
<style type= "Text/css" >
*{margin:0;padding:0;}
. header{width:1000px;margin:0 auto;height:400px;background: #ccc; font-size:40px;text-align:center;line-height : 400px;color: #00FFFF;}
. content{width:1000px;margin:0 Auto;}
. cont{height:500px;}
. Cont1{background: #666666;}
. Cont2{background: #999999;}
. Cont3{background: #CCCCCC;}
. Cont4{background: #FF0000;}
. Cont5{background: #6699CC;}
. cont h4{font-size:16px;}
. pop1{position:absolute;top:400px;right:50px;width:100px;height:240px;border:1px #00FFFF Solid;}
. Pop1. R_nav{list-style:none;}
. pop1. R_nav li{width:100px;}
. pop1. R_nav Li a{display:block;width:100px;height:40px;line-height:40px;text-align:center;font-size:14px; Background: #ccc; color: #fff; text-decoration:none;}
. pop1. R_nav li A:hover,.pop1. R_nav li a.cur{background: #6699CC; color: #00FFCC;}
. pop1. TT a{display:block;width:100px;height:40px;line-height:40px;text-align:center;font-size:14px;background:# Ccc;color: #fff; text-decoration:none;}
. Pop1. TT a:hover{background: #6699cc; color: #00ffcc;}
. pop{width:100px;height:240px;border:1px #00FFFF solid;position:fixed;margin:0;padding:0;top:50%;margin-top:- 380px;right:50px;}
. Pop. R_nav{list-style:none;}
. Pop. R_nav li{width:100px;}
. Pop. R_nav Li a{display:block;width:100px;height:40px;line-height:40px;text-align:center;font-size:14px; Background: #ccc; color: #fff; text-decoration:none;}
. Pop. R_nav li A:hover,.pop. R_nav li a.cur{background: #6699CC; color: #00FFCC;}
. Pop. TT a{display:block;width:100px;height:40px;line-height:40px;text-align:center;font-size:14px;background:# Ccc;color: #fff; text-decoration:none;}
. Pop. TT a:hover{background: #6699cc; color: #00ffcc;}
</style>
<body id= "Top" >
<div class= "header" > head! </div>
<div class= "Content" >
<div class= "Cont1 cont" >
<div class= "Cont2 cont" >
<div class= "Cont3 cont" >
<div class= "cont4 cont" >
<div class= "cont5 cont" >
</div><!--content-->
<div id= "Popup" class= "Pop1" >
<ul class= "R_nav" >
<li class= "lis" ><a class= "cur" href= "javascript:;" title= "> Monday </a></li>
<li class= "lis" ><a href= "javascript:; title=" "> Tuesday </a></li>
<li class= "lis" ><a href= "javascript:; title=" "> Wednesday </a></li>
<li class= "lis" ><a href= "javascript:; title=" "> Thursday </a></li>
<li class= "lis" ><a href= "javascript:; title=" "> Friday </a></li>
</ul><!--. r_nav-->
<div class= "tt" ><a class= "Totop" href= "javascript:;" title= "" >Top</a></div>
</div><!--#popup-
<script src= "Js/jquery1.11.1.min.js" type= "Text/javascript" ></script>
<script type= "Text/javascript" >
$ (document). Ready (function () {
var nav= (function (navobj) {
Navobj.init=function () {
this.n=0;
This.offsettop=[];
This.scrolltype=true;
This.review=function () {
$ (' #popup. Lis a '). EQ (THIS.N). addclass (' cur '). Parent (). siblings (). Children (). Removeclass (' cur ');
};
For (Var i=0;i<$ ('. Content. cont '). length;i++) {
This.offsetTop.push ($ ('. Content. cont '). EQ (i). Offset (). top);
};
Navobj.binde ();
};
Navobj.binde=function () {//scroll bar scrolling changes navigation element effect
var self=this;//here is the same as above
$ (window). Bind (' Load scroll ', function () {
var stval=$ (this). ScrollTop ();
if (stval>399) {//To determine if scroll bar scrolling distance is greater than or less than header height, let navigation effect correspond to the first
if (Stval<self.offsettop[0]) {
Alert (self.offsettop[0]);
self.n=0;
}else{
for (Var j=0;j<self.offsettop.length;j++) {
if (stval> (self.offsettop[j]+300) && stval<self.offsettop[j+1]) {self.n=j+1;break;} The 300 here is a constant.
};
};
if (self.scrolltype===true) {
Self.review ();
}
$ (' #popup '). Removeclass (' Pop1 '). addclass (' Pop ');
}else{
$ (' #popup '). Removeclass (' Pop '). addclass (' Pop1 ');
$ (' #popup li a '). Parent (' Li:first-child '). Children (). addclass (' cur '). Parent (). siblings (). Children (). Removeclass ( ' cur ');
};
});
$ ('. Totop '). Click (function () {///click Back to Home Top button implementation page does not refresh return top
$ (' HTML, Body '). Animate ({scrolltop:0+ ' px '},500);
$ (' #popup li a '). Parent (' Li:first-child '). Children (). addclass (' cur '). Parent (). siblings (). Children (). Removeclass ( ' cur ');
});
$ (' #popup. Lis '). Delegate (' A ', ' click ', Function (e) {//Click Navigation to locate page content
self.n=$ (This). Index (' #popup. Lis a ');
Self.scrolltype=false;
Self.review ();
var T=SELF.OFFSETTOP[SELF.N];
$ (' html,body '). Animate ({scrolltop:t},500,function () {///scroll bar scrolls the page different contents of the offsettop Value implementation button corresponding effect
Self.scrolltype=true;
$ (SELF.N). addclass (' cur '). Parent (). siblings (). Children (). Removeclass (' cur ');
});
});
};
return navobj;
}) (Window.navobj | | {});
Nav.init ();
});
</script>
</body>
The above code includes all, interested in the code farmers if interested in research, you can directly copy all the code, self-built an HTML file to run it!!
This article is from the "focus on Technology focus Front" blog, be sure to keep this source http://oxoxo.blog.51cto.com/9301862/1652451
JS Sidebar Navigation Click to locate page content location and scroll bar scrolling change navigation element corresponding state
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
