Home > Industries > E-commerce
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> Untitled Document </title>
<style type= "Text/css" >
*{margin:0; padding:0;}
body{_background-attachment:fixed; _background-image:url (About:blank);} /* Implement IE6 incompatible fixed flashing problem */
. header{width:1000px; height:500px; background:red; margin:0 Auto;}
. first,.second,.three,.four {width:1000px; margin:0 Auto; height:800px; margin-top:20px; Background: #0FF;}
. fixbox {width:50px; position:fixed; _position:absolute; _bottom:30%; _left:5%; _top:expression (( Offsetparent.scrolltop) +50); bottom:30%; left:5%; Height:atuo;}
. fixbox ul {width:50px; height:100px;}
. Fixbox ul li {list-style:none; height:30px; line-height:30px; background: #ccc; text-align:center;}
. Fixbox ul li.show{background: #F63;}
</style>
<script src= "Http://sz189.cn/promotion/js/jquery-1.7.1.min.js" type= "Text/javascript" ></script>
<script type= "Text/javascript" >
$ (function () {
var first=$ (". First"). Offset (). Top;
var second=$ (". Second"). Offset (). Top;
var three=$ (". three"). Offset (). Top;
var four=$ (". Four"). Offset (). Top;
$ (window). Scroll (function () {
if ($ (this). ScrollTop () <=first) {
$ (". Show1"). AddClass ("show"). Siblings (). Removeclass ("show");
}else if ($ (this). ScrollTop () >=first&&$ (this). ScrollTop () <=second) {
$ (". Show2"). AddClass ("show"). Siblings (). Removeclass ("show");
}else if ($ (this). ScrollTop () >=second&&$ (this). ScrollTop () <=three) {
$ (". Show3"). AddClass ("show"). Siblings (). Removeclass ("show");
}else if ($ (this). ScrollTop () >=three && $ (this). ScrollTop () <=four) {
$ (". Show4"). AddClass ("show"). Siblings (). Removeclass ("show");
}
});
});
</script>
<body>
<div class= "Header" ></div>
<div class= "First" ></div>
<div class= "Second" ></div>
<div class= "three" ></div>
<div class= "Four" ></div>
<!--Right Nav--
<div class= "Fixbox" >
<ul>
<li class= "Show1" >1</li>
<li class= "Show2" >2</li>
<li class= "SHOW3" >3</li>
<li class= "Show4" >4</li>
</ul>
</div>
</body>
PS: code can also be optimized ~ ~
E-commerce mouse scrolling floor display
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
