側邊欄導航

<div id="sidebar">

        <a id="f11" href="javascript:void();" class="hover"><em>1F</em><span>導航項目</span></a>

        <a id="f22" href="javascript:void();"><em>2F</em><span>導航項目</span></a>

        <a id="f33" href="javascript:void();"><em>2F</em><span>導航項目</span></a>

 </div>

<script>
$(function(){
		$(window).scroll(function(){
			//爲頁面添加頁面滾動監聽事件
			var wst =  $(window).scrollTop()+300; //滾動條距離頂端值
			for (i=1; i<8; i++){             //加循環
				if($("#f"+i).offset().top<=wst){ //判斷滾動條位置
					$('#sidebar a').removeClass("hover"); //清除c類
					$("#f"+i+i).addClass("hover");	//給當前導航加c類
				}
			}
		});

		$("#sidebar a").click(function(){
			$("#sidebar a").removeClass("hover");
			$(this).addClass("hover");
			var newid=$(this).attr("id");
			newid=newid.substring(0,2);
			var newtop=$("#"+newid).offset().top;
			$("html,body").animate({scrollTop:newtop},800);
		});

		var WindowHeight = $(window).height();
		$(window).scroll(function(){
			var _ScrollTop = $(window).scrollTop();
			if(_ScrollTop > WindowHeight-100){
				$("#sidebar").css({visibility:"visible"});
			}else{
				$("#sidebar").css({visibility:"hidden"});
			}
		});
	});
</script>

　　

方法二：

//右側導航
        $('.rightNav_item').click(function() {
            var rightNav_target = 'rightNav_target' + $(this).index();
            //          $(this).addClass('current').siblings().removeClass('current');
            $('html,body').animate({
                scrollTop: $('#' + rightNav_target).offset().top
            }, 400);
        });

        $(window).scroll(function() {
            var top = $(document).scrollTop(); //定義變量，獲取滾動條的高度
            var menu = $("#menu"); //定義變量，抓取#menu
            var items = $(".rowItem"); //定義變量，查找.item

            var curId = ""; //定義變量，當前所在的樓層item #id 
            items.each(function() {
                var m = $(this); //定義變量，獲取當前類
                var mIndex = $(this).index();
                var itemsTop = m.offset().top; //定義變量，獲取當前類的top偏移量
                if(top >= itemsTop - 100) {
                    curId = "#" + m.attr("id");
                } else {
                    return false;
                };
            });

            //給相應的樓層設置cur,取消其餘樓層的cur
            var curLink = menu.find(".current");
            if(curId && curLink.attr("href") != curId) {
                curLink.removeClass("current");
                menu.find("[href=" + curId + "]").addClass("current");
            };
        });