《js导航条滚动到页面顶时固定住》由会员分享,可在线阅读,更多相关《js导航条滚动到页面顶时固定住(5页珍藏版)》请在金锄头文库上搜索。
1、导航条效果Js 实现一个简单的导航条效果。 导航条滚动到页面顶部时 停止滚动,停留在 页面顶端,提高用户感受。1html 部分 navigation.html 这 个导航条有两部分,一个浮 动向左,一个向右navigation- - - - - - -d- - - - - 男士时装女士时装 儿童时装香氛彩妆diormagla maison diordiortv- - - - - - - - - -d- - - - - - - - - - - -d- - - - - - - - - - - - - - - -d- - - - - - - - -d- - - - - - - - - - - - 2
2、.js 部分 navigation.js,window.onscroll=function() if ($(document).scrollTop() 250) /$(#pf_nav).show(); $(#container2).addClass(float); else /$(#pf_nav).hide(); $(#container2).removeClass(float); 3.css 部分 navigation.css.navileft ullist-style: none;.navileft lifloat: left;text-align:center;padding: 20px
3、;font-size: 10px;padding-top: 40px;padding-bottom: 40px ;/*链接访问前后样式*/.navileft a:linkcolor:#000;text-decoration:none;/*.navigation a:visitedcolor:#666;text-decoration:underline;*/.navileft a:hovercolor:#000; text-decoration:underline;.naviright padding-right: 50px;.naviright ullist-style: none;.navi
4、right lifloat: right; text-transform: uppercase; text-align:center;padding: 20px;font-size: 10px; padding-top: 40px;padding-bottom: 40px;.naviright a:linkcolor:#000;text-decoration:none;.naviright a:hovercolor:#000; text-decoration:underline;#container2 background-color: #fff;height:100px;border-bottom-style: solid ;border-bottom-width: 1px;border-bottom-color: #888;width:1170px;#headdheight: 250px;.float position:fixed; z-index:999999; top:0px;Css 这里写的有点乱,有些可能用不到,但时间久了不记得了,就都放在这了。