JQ 点击跳转固定位置和对应目录的小标题高亮

最新推荐文章于 2024-04-30 18:26:30 发布

最新推荐文章于 2024-04-30 18:26:30 发布 · 671 阅读

文章标签：

#JQ点击跳转固定位置 #JQ对应目录的小标题高亮

境-JS 专栏收录该内容

197 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现的网页固定导航栏设计方法。该方法通过动态生成目录并将其固定在页面左侧，方便用户快速定位和浏览长篇文章。当用户滚动页面时，导航栏会根据当前位置高亮显示相应的章节链接。

<!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-smallnav{ background: #f60; color: #fff; width: 120px; position: fixed; top: 200px; left: 0px;}
.fix-smallnav li{ padding-left: 8px; line-height: 2em;}
.fix-smallnav .fix-snav-hover{ font-weight: bold;  background-color: #0099FF;}
.fix-smallnav .fix-snav-hover:after{ content: "[在读]";}
</style>
</head>
<body>
<div style="height: 2000px;"></div>
<div class="t-container g-w" id="container">
	<h3>小标题一</h3>
	<p></p>
	<h3>小标题二</h3>
	<p></p>
	<h3>小标题三</h3>
	<p></p>
	<h3>小标题四</h3>
	<p></p>
	<h3>小标题五</h3>
	<p></p>
</div>
<div style="height: 2000px;"></div>
<ul class="fix-smallnav" id="smallnav"></ul>
<script>
$(function(){
	smallNav();
})
//点击跳转固定位置
function smallNav(){
	var subtit = $("#container h3");
	var smallnav = $("#smallnav");
	//获取文章的 h3 标签自动产生目录的小标题
	for(var i=0;i<subtit.size();i++){
		smallnav.append("<li>"+subtit.eq(i).text()+"</li>");
	}
	//点击目录的小标题跳转到对应的文章
	$("#smallnav li").click(function(){
		$('html, body').animate({  
            scrollTop: subtit.eq($(this).index()).offset().top-40
        },600); 
	});
}
//显示当前内容的目录
$(window).scroll(function(){
	var container = $("#container");
	var subtit = $("#container h3");
	var smallnav = $("#smallnav");
	var snavli = $("#smallnav li");
	var lbTop = 0;
	var winHeight = $(window).height();
	var scrollTop = $(window).scrollTop();
	var contBeginTop = subtit.eq(0).offset().top-scrollTop;
	var contEndTop = subtit.eq(0).offset().top+container.height()-scrollTop-winHeight;
	if(contBeginTop>(winHeight-300)){ //如果头部还不到内容部分 目录的小标题不高亮
		for(var i=0;i<subtit.size();i++){
			snavli.eq(i).removeClass("fix-snav-hover");
		}
	}else if((contEndTop+winHeight)<0){ //如果尾部还不到内容部分 目录的小标题不高亮
		for(var i=0;i<subtit.size();i++){
			snavli.eq(i).removeClass("fix-snav-hover");
		}
	}else{ //目录的小标题开始高亮
		for(var i=0;i<subtit.size();i++){
			if(i<subtit.size()-1){
				lbTop = subtit.eq(i+1).offset().top-scrollTop;
			}else{
				lbTop = subtit.eq(0).offset().top+container.height()-scrollTop;
			}
			if(lbTop>winHeight*0.26){
				snavli.eq(i).addClass("fix-snav-hover").siblings().removeClass("fix-snav-hover");
				break;
			}
		}
	}
}); 
</script>
</body>
</html>

效果图：