js侧边导航栏点击跳转,滚动窗口高亮显示对应标题的导航

//右侧标题导航
		var nav_flags = [1,1,1,1,1,1,1,1,1,1,1,1];//节流阀
		var nflen = nav_flags.length - 1;//循环数
		var nav_index;//点击的li的index值
		var totop;//标题区距离顶部的距离
		var timeId;
		var i;
	    $("#quick_links .rightNav li").click(function () {
	    	nav_index = $(this).index();`在这里插入代码片`
	    	if(nav_flags[nav_index]){
		        totop = $(".ceng").eq(nav_index).offset().top - 50;
		        totop = totop == -50 ? 0 : totop;
		        if($("html,body").scrollTop() !== totop){
		        	//其他的阀值为1
		        	for(i = 0;i<nflen;i++){
		        		nav_flags[i] = 1;
		        	}
		        	nav_flags[nav_index] = 0;
		        	$("html,body").stop().animate({ scrollTop: totop }, 500);
		        	clearTimeout(timeId);
		        	timeId = setTimeout(function(){
		        		nav_flags[nav_index] = 1;
		        	},500);    		
		    	}
	    	}
	    })
	    //点击返回顶部
	    $(".return_top").click(function () {
		    if($("html,body").scrollTop() !== 0){	
		    	if(nav_flags[11]){
		    		for(i = 0;i<nflen;i++){
			        		nav_flags[i] = 1;
			        	}
		    		nav_flags[11] = 0;
			        $("html,body").stop().animate({ scrollTop: 0 }, 500);
			        clearTimeout(timeId);
			        setTimeout(function(){
				        nav_flags[11] = 1;
				    },500); 
			    }    
	    	}
	    })
	    $(window).scroll(function () {
	        var aDiv = $('.ceng'); 
	        var winH = $(window).height(); //可视窗口高度
	        iTop = $(window).scrollTop(); //页面滚动的距离
	        var i = 0;
	        aDiv.each(function () {
	            if (winH + iTop - $(this).offset().top > winH - winH/2) {
	                $(".rightNav li").removeClass('floor-act');
	                $(".rightNav li").eq(i).addClass('floor-act');
	                i++;
	            }
	        })
	    })
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值