网页定位导航

<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="+ activeId +"]").addClass("active");
                }
            })
        })
    })
</script>