JQ 点击目录跳转固定位置的最终版

最新推荐文章于 2023-10-31 22:58:58 发布

最新推荐文章于 2023-10-31 22:58:58 发布 · 401 阅读

文章标签：

#JQ 点击跳转内容的固定位置 #JQ 点击目录跳转固定位置

境-JS 专栏收录该内容

197 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS和jQuery实现的固定位置目录导航栏，该导航栏会根据页面滚动位置高亮显示当前阅读的部分，并允许用户点击目录快速跳转至相应内容。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="base.css"/>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<style>
.t-container{}
.t-container h3{ line-height: 2em;}
.t-container p{ height: 200px; background-color: #808080;}
.fix-menu{ background: #f60; color: #fff; width: 120px; position: fixed; top: 200px; left: 0px;}
.fix-menu li{ padding-left: 8px; line-height: 2em;}
.fix-menu .fix-snav-hover{ font-weight: bold;  background-color: #0099FF;}
.fix-menu .fix-snav-hover:after{ content: "[在读]";}
</style>
</head>
<body>
<div style="height: 2000px;"></div>
<div class="t-container g-w" id="container">
	<h3>小标题一</h3>
	<p style="height: 600px;"></p>
	<h3>小标题二</h3>
	<p style="height: 80px;"></p>
	<h3>小标题三</h3>
	<p style="height: 2600px;"></p>
	<h3>小标题四</h3>
	<p style="height: 100px;"></p>
	<h3>小标题五</h3>
	<p style="height: 200px;"></p>
</div>
<div style="height: 2000px;"></div>
<ul class="fix-menu" id="menu"></ul>
<script>
$(function(){
	fixMenu();
})
//固定位置浮动的目录
function fixMenu(){
	/**
	 * cont 内容
	 * contTit 内容里的小标题
	 * menu 固定位置浮动的目录 
	 * */
	var cont = $("#container"),contTit = $("#container h3"),menu = $("#menu");
	/**
	 * contTitTop 每个内容里的小标题到窗口的顶部的高度
	 * winHeight 窗口的高度
	 * winScrollTop 窗口的顶部到网页的顶部的高度
	 * contBeginTop 第一个小标题到窗口的顶部的高度
	 * contEndTop 最后一个小标题到窗口的顶部的高度
	 * */
	var contTitTop = 0,winHeight = 0,winScrollTop = 0,contBeginTop = 0,contEndTop = 0;
	//每个内容里的小标题之间的高度
	var contTitBetweenHeight = [];
	for(var i=0;i<contTit.size()-1;i++){
		contTitBetweenHeight[i] = contTit.eq(i+1).position().top - contTit.eq(i).position().top;
	}
	//获取文章的 h3 标签自动生成目录的小标题
	for(var i=0;i<contTit.size();i++){
		menu.append("<li>"+contTit.eq(i).text()+"</li>");
	}
	//因为现在才生成li元素，所以现在才获取
	var menuTit = $("#menu li");
	//点击目录的小标题跳转到对应的文章
	menuTit.click(function(){
		$('html, body').animate({  
            scrollTop: contTit.eq($(this).index()).offset().top-40
        },600); 
	});
	//显示当前内容的目录
	$(window).scroll(function(){
		winHeight = $(window).height();
		winScrollTop = $(window).scrollTop();
		contBeginTop = contTit.eq(0).offset().top-winScrollTop;
		contEndTop = contTit.eq(0).offset().top+cont.height()-winScrollTop-winHeight;		
		if(contBeginTop>(winHeight-300)){ //如果头部还不到内容部分 目录的小标题不高亮
			for(var i=0;i<contTit.size();i++){
				menuTit.eq(i).removeClass("fix-snav-hover");
			}
		}else if((contEndTop+winHeight)<0){ //如果尾部还不到内容部分 目录的小标题不高亮
			for(var i=0;i<contTit.size();i++){
				menuTit.eq(i).removeClass("fix-snav-hover");
			}
		}else{ //目录的小标题开始高亮
			for(var i=0;i<contTit.size();i++){
				//除了最后的一个小标题
				if(i<contTit.size()-1){
					contTitTop = contTit.eq(i+1).offset().top-winScrollTop;
					if(contTitBetweenHeight[i]>winHeight*0.5){
						if(contTitTop>winHeight*0.3){
							menuTit.eq(i).addClass("fix-snav-hover").siblings().removeClass("fix-snav-hover");
							break;
						}
					}else{
						if(contTitTop>contTitBetweenHeight[i]*0.5){
							menuTit.eq(i).addClass("fix-snav-hover").siblings().removeClass("fix-snav-hover");
							break;
						}
					}
				}else{
					menuTit.eq(i).addClass("fix-snav-hover").siblings().removeClass("fix-snav-hover");
					break;
				}
			}
		}
	});
} 
</script>
</body>
</html>

效果图：