滾動監聽： 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一般和導航高度有關