首页 > 代码库 > 滚动监听: bootstrap 的scrollspy
滚动监听: bootstrap 的scrollspy
滚动监听
bootstrap 的scrollspy,需要借助.nav样式,活动的部分是加
.active类。本身导航没有position:fixed,需要自己加入
滚动监听。只有滚动和监听,只有默认锚点链接做调转,若想改变,只有自己写跳转方法--
阻止a标签跳转(不直接用锚点链接做跳转);而是用animate(scrollTop)跳转,scrollTop可以设置距顶端的距离.animate({scrollTop: });
html
<div id="menu"> <div id="nav-awu"> <ul class="nav"> <!--<li><a href="http://www.mamicode.com/#cooperation">潮童</a></li>--> <li><a href="#downJacket" onclick="return a_stop(‘#downJacket‘);" >羽绒</a></li> <li><a href="#cotton" onclick="return a_stop(‘#cotton‘);" >时尚棉服</a></li> <li><a href="#sweater" onclick="return a_stop(‘#sweater‘);" >毛衣</a></li> <li><a href="#trousers" onclick="return a_stop(‘#trousers‘);" >裤装</a></li> <li><a href="#shoes" onclick="return a_stop(‘#shoes‘);" >鞋履</a></li> </ul> </div> </div>
css 重写样式
#menu ul.nav, #menu ul.nav:hover{border: none; background: none;height: 50px; line-height: 50px;margin: 0; padding: 0;} #menu ul.nav-tab, #menu ul.nav-tab:hover{border: none; background: none;height:50px; line-height: 50px;margin: 0; padding: 0} #menu ul li { display: inline-block; width: 16%; margin: 10px 2% 0; height: 30px; /*margin: 0;*/ padding: 0; border: none; text-align: center; } .nav > li > a { /*position: relative;*/ display: block; width: auto; padding: 0; //默认情况下 padding有数值,需要设为0 } #menu ul li a { margin: 0;padding: 0; height: 28px; line-height: 28px; font-size: 12px; text-decoration: none; color: #fff; } /*#menu ul li a:hover{ font-size:12px; text-decoration: none; color: #fff; border-bottom:2px solid #fefb00; }*/ //active类 #menu ul li.active > a, #menu ul li.active > a:focus{ margin: 0;padding: 0; height: 28px; line-height: 28px; border:none; border-bottom: 2px solid #fefb00; font-size: 12px; text-decoration: none; color: #fff; background: none; /*text-decoration: dashed;*/ } .nav > li > a:hover, .nav > li > a:focus { text-decoration: none; background: none; }
js
$(function () { //导航监控 var fixWidth = ($(window).width() - $("#menu").width()) / 2; var scroHeight = $("#menu").offset().top; $(window).scroll(function () { if ($(window).scrollTop() >= scroHeight) { $("#menu").css({ "width": $("#banner").width(), "position": "fixed", "top": 0, "left": fixWidth }); $("#box").css("margin-top","50px"); } else { $("#menu").css({ "position": "relative", "top": 0, "left": 0 }); $("#box").css("margin-top","0"); } }); $(‘body‘).scrollspy({target: ‘#menu‘, offset: 50});//offset是根据 多少的偏移的距离 来做监听 }); function a_stop(attr){ var isRel = $("#menu").css("position") == "relative"; var fix = 50; $("html,body").animate({scrollTop:$(attr).offset().top - fix},10); return false; //必须要 }
1.阻止a标签跳转
参考 http://blog.csdn.net/awe5566/article/details/22583699
href="http://www.mamicode.com/#downJacket" 锚点链接 必须写;
但又想阻止a标签跳转(阻止默认的滚动监听,好自己设置scrollTop),
onclick="return fales"
<a href="#downJacket" onclick="return a_stop(‘#downJacket‘);" >羽绒</a>
2.自己写跳转方法 :用animate({scrollTop:number) 做跳转
scrollTop
offset是根据 多少的偏移的距离 来做监听,offset一般和导航高度有关
滚动监听: bootstrap 的scrollspy
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。