滚动监听： 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="#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="#downJacket"  锚点链接 必须写；

但又想阻止a标签跳转（阻止默认的滚动监听，好自己设置scrollTop），

onclick="return fales"

<a href="#downJacket" onclick="return a_stop('#downJacket');" >羽绒</a>

2.自己写跳转方法 ：用animate({scrollTop:number) 做跳转

scrollTop

offset是根据 多少的偏移的距离 来做监听，offset一般和导航高度有关