滚动条滚动到一定高度时，显示导航栏
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <link rel="stylesheet" type="text/css" href="http://css.40017.cn/cn/min/??/cn/c/zt/2013/ztBase.css?v=13080902"> 7 <script type="text/javascript" src="http://js.40017.cn/cn/min/??/cn/public/fish.1.4.5.js,/cn/public/fc.1.1.6.js?v=082102"></script> 8 <style> 9 body{height: 2800px;} 10 .floatBox{ 11 display: none; 12 padding: 90px 0 0 50px; 13 background: url(http://img1.40017.cn/cn/s/ZhuanTi/2015/74247/box3.png) no-repeat top center; 14 width: 170px; 15 height: 300px; 16 } 17 .floatBox a{ 18 display: block; 19 background:url(http://img1.40017.cn/cn/s/ZhuanTi/2015/74247/anchorBg.png) no-repeat center center; 20 width: 162px; 21 height: 52px; 22 line-height: 52px; 23 text-align: center; 24 font-size: 26px; 25 color:#fff8df; 26 } 27 .floatBox .toTop a{ 28 background:url(http://img1.40017.cn/cn/s/ZhuanTi/2015/74247/topBg.png) no-repeat center center; 29 font-size: 20px; 30 } 31 .floatBox ul li a:hover{ 32 background:url(http://img1.40017.cn/cn/s/ZhuanTi/2015/74247/anchorBgH.png) no-repeat center center; 33 } 34 </style> 35 </head> 36 <body> 37 <div class="floatBox"> 38 <ul> 39 <li><a href="#one">花团锦簇</a></li> 40 <li><a href="#two">百花争艳</a></li> 41 <li><a href="#three">花红柳绿</a></li> 42 <li><a href="#four">繁花似锦</a></li> 43 </ul> 44 <div class="toTop"><a href="#">TOP</a></div> 45 </div> 46 </body> 47 <script> 48 fish.one(window).on("scroll", function () { 49 var wT=document.documentElement.scrollTop || document.body.scrollTop; 50 if (wT> 800) { 51 fish.one(".floatBox").css("position:fixed;display:block;bottom:50px;right:20px;") 52 } 53 else { 54 fish.one(".floatBox").css("display:none;") 55 } 56 }) 57 </script> 58 </html>