<style>    #header{height:50px; }    #siderList{position: fixed; right:0; bottom: 20%;}    #siderList li{margin-bottom: 5px; list-style: none;}    #siderList li a{display: inline-block; width: 50px; height: 50px; background: #32B981; text-align: center; color: #fff; line-height: 50px; cursor: pointer;}    #siderList li a.active{background: #4390ee;}    #item1{height: 400px; background: #008451;}    #item2{height: 1000px; background: #808080;}    #item3{height:500px; background: #973e76;}    #item4{height:500px; background: #2489ce;}</style><div id="header">导航头</div><div id="list">    <div id="item1" class="item">        1f    </div>    <div id="item2" class="item">        2f    </div>    <div id="item3" class="item">        3f    </div>    <div id="item4" class="item">        4f    </div></div><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><ul id="siderList">    <li><a href="#item1">1F</a></li>    <li><a href="#item2">2F</a></li>    <li><a href="#item3">3F</a></li>    <li><a href="#item4">4F</a></li></ul><script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script><script>    $(function() {        var links = $("#siderList");        $(window).scroll(function() {            var scrollH = $(window).scrollTop();            var item = $("#list").find(".item");            item.each(function() {                var self = $(this),                    topH = self.offset().top -200;                var activeId = "";                if(scrollH >= topH) {                    activeId = "#" + self.attr("id");                }else {                    return false;                }                var activeLink = links.find(".active");                if(activeLink && activeLink.attr("href") != activeId) {                    activeLink.removeClass("active");                    links.find("[href=http://www.mamicode.com/"+ activeId +"]").addClass("active");                }            })        })    })</script>