JQ click to jump to the fixed position and the subtitle of the corresponding directory is highlighted

<!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>Subheading one</h3>
	<p></p>
	<h3>Subheading two</h3>
	<p></p>
	<h3>Subheading three</h3>
	<p></p>
	<h3>Subheading four</h3>
	<p></p>
	<h3>Subheading five</h3>
	<p></p>
</div>
<div style="height: 2000px;"></div>
<ul class="fix-smallnav" id="smallnav"></ul>
<script>
$(function(){
	smallNav();
})
//Click to jump to fixed position
function smallNav(){
	var subtit = $("#container h3");
	var smallnav = $("#smallnav");
	//Get the h3 tag of the article to automatically generate the subtitle of the directory
	for(var i=0;i<subtit.size();i++){
		smallnav.append("<li>"+subtit.eq(i).text()+"</li>");
	}
	//Click the subtitle of the directory to jump to the corresponding article
	$("#smallnav li").click(function(){
		$('html, body').animate({  
            scrollTop: subtit.eq($(this).index()).offset().top-40
        },600);
	});
}
//Display the directory of the current content
$(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)){ //If the header is not yet the subtitle of the content directory, it will not be highlighted
		for(var i=0;i<subtit.size();i++){
			snavli.eq(i).removeClass("fix-snav-hover");
		}
	}else if((contEndTop+winHeight)<0){ //If the subtitle of the content part directory is not highlighted at the end
		for(var i=0;i<subtit.size();i++){
			snavli.eq(i).removeClass("fix-snav-hover");
		}
	}else{ //The subtitle of the directory starts to be highlighted
		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>
Effect picture:
JQ click to jump to the fixed position and the subtitle of the corresponding directory is highlighted

Guess you like
