使用JQ实现滚动时高亮节点效果-优快云博客

本文介绍了一款使用JavaScript库JQ创建的滚动高亮节点插件，通过该插件可以在页面滚动时动态高亮显示特定内容，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

;(function($) {
	$.fn.scrollHighlight = function(options) {
		return this.each(function() {
			var defualts = {
				childItem: "a", //高亮的节点
				attribute: "href", //高亮节点属性
				highlight: 'highlight', //给高亮节点添加的类
				buffer: 0, //距离节点的距离
				container: window, //滚动内容的盒子，默认是window
				cancelFlag: true, //当超过节点时是否取消高亮，默认是取消高亮
				mode: 'vertical' //滚动的模式，默认为竖直方向，可以为其他如horizontal(水平方向)
			};
			var opts = $.extend({}, defualts, options),
				obj = $(this),
				$container = $(opts.container),
				mode = opts.mode,
				buffer = opts.buffer,
				highlight = opts.highlight,
				childItem = opts.childItem,
				attribute = opts.attribute;
			if (obj.length <= 0) return;
			var resizeTimer; // Set resizeTimer to empty so it resets on page load
			var item = obj.find(childItem),
				i = 0,
				len = item.length,
				wrap = [],
				index = [],
				anchor = [];
			for (; i < len; i++) {
				anchor.push(item.eq(i).attr(attribute)); //获取需要高亮的所有节点
			}
			var aLen = anchor.length;
			for (var j = 0; j < aLen; j++) {
				var that = opts.container == window ? $(document).find(anchor[j]) : $container.find(anchor[j]);
				if (that.length && that.is(":visible")) { //筛选出容器内存在的节点并且是显示的
					wrap.push(anchor[j]); //将节点放置在数组wrap中
					index.push(j); //筛选出他们的位置
				}
			}
			var wLen = wrap.length;
			//滚动时的函数
			function onScroll(e) {
				var pos = [];
				var scrollPos = {
					top: $container.scrollTop(),
					left: $container.scrollLeft()
				};
				var xy = (mode == 'vertical') ? scrollPos.top + buffer : scrollPos.left + buffer;
				console.log("滚动的高度"+xy);
				for (var i = 0; i < wLen; i++) {
					if (mode == 'vertical') {
						//当默认是垂直滚动时，获取上面节点的位置，并和滚动高度对比，当滚动高度大于它的时候，高亮。
						//当滚动高度超过它的位置加上他的高度时，取消节点的高亮
						pos.push($(wrap[i]).offset().top);
						myPos(i); //高亮函数
						if (opts.cancelFlag && (pos[i] < xy - $(wrap[i]).outerHeight())) {
							item.eq(index[i]).removeClass(highlight);
						}
					} else {
						//当滚动方式为水平时，获取节点的左边位置，并和做拉动的值对比，当拉动的值大于它的位置时，高亮
						//当拉动的值超过它的左边位置加上它的外边框长度时，取消节点高亮
						pos.push($(wrap[i]).offset().left);
						myPos(i); //高亮函数
						if (opts.cancelFlag && (pos[i] < xy - $(wrap[i]).outerWidth())) {
							item.eq(index[i]).removeClass(highlight);
						}
					}
				}
				//滚动值大于元素位置添加高亮
				function myPos(i) {
					if (pos[i] <= xy) {
						item.removeClass(highlight).eq(index[i]).addClass(highlight);
					}
				}
			}
			//点击跳转到相应的位置
			item.each(function(index) {
				$(this).click(function() {
					console.log("节点偏移量"+$("#page3").position().top);
					var that = opts.container == window ? $(document).find(anchor[index]) : $container.find(anchor[index]);
					if (that.length && that.is(":visible")) {
						// console.log("yes");
						if (mode == 'vertical') {
							
							$("html,body").animate({
								scrollTop: $(anchor[index]).offset().top - buffer
							}, 300);
						} else {
							// console.log($(anchor[index]).offset().left);
							$("html,body").animate({
								scrollLeft: $(anchor[index]).offset().left - buffer
							}, 300);
						}
					}

				})
			})
			// 当有滚动时执行下面代码
			$container.on("scroll", function() {
				clearTimeout(resizeTimer);
				resizeTimer = setTimeout(onScroll, 100);
				// alert("yes");
			});
			// 当发现调整屏幕大小时，重新执行代码
			$(window).on("resize", function() {
				clearTimeout(resizeTimer);
				resizeTimer = setTimeout(onScroll, 100);
			});
		});
	};
})(jQuery);

demo.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQ 滚动高亮节点插件</title>
<script type="text/javascript" src="jquery-1.10.1.min.js" ></script>
<script type="text/javascript" src="scrollHighlight.js" ></script>
<script type="text/javascript">
$(function(){
	$(".sidebar").scrollHighlight({buffer:10});
})
</script>
<style type="text/css">
*{margin:0; padding:0; list-style: none;}
a{text-decoration: none;}
img{max-width: 100%; height: auto;}
.main{overflow: auto;}
.main li{color:#fff; font-size:20px; padding:0px 20px 400px;}
.main li:nth-child(4n+1){background: #5DB2FF;}
.main li:nth-child(4n+2){background: #FB6E52;}
.main li:nth-child(4n+3){background: #E75B8D;}
.main li:nth-child(4n+4){background: #A0D468;}
.main li:last-child{margin-bottom:600px;}
.sidebar{position:fixed; right:0; top:40%; margin:-100px 0 0 0; padding:10px; background: #fff; width:100px;}
.sidebar li{}
.sidebar a{font-size:14px; color:#333; line-height: 30px;}
.sidebar a:hover{color:blue;}
.sidebar .highlight{font-weight: bold; color:blue;}
</style>
</head>
<body>
<div class="main">
	<ul>
		<li id="page1">
			<h3>这是左边滚动到这里右边高亮的节点1</h3>
		</li>
		<li id="page2">
			<h3>这是左边滚动到这里右边高亮的节点2</h3>
		</li>
		<li id="page3">
			<h3>这是左边滚动到这里右边高亮的节点3</h3>
		</li>
		<li id="page4">
			<h3>这是左边滚动到这里右边高亮的节点4</h3>
		</li>
		<li id="page5">
			<h3>这是左边滚动到这里右边高亮的节点5</h3>
		</li>
		<li id="page6">
			<h3>这是左边滚动到这里右边高亮的节点6</h3>
		</li>
		<li id="page7">
			<h3>这是左边滚动到这里右边高亮的节点7</h3>
		</li>
		<li id="page8">
			<h3>这是左边滚动到这里右边高亮的节点8</h3>
		</li>
		<li id="page9">
			<h3>这是左边滚动到这里右边高亮的节点9</h3>
		</li>
		<li id="page10">
			<h3>这是左边滚动到这里右边高亮的节点10</h3>
		</li>
	</ul>
</div>
<div class="sidebar">
	<ul>
		<li><a href="#page1">这是节点1</a></li>
		<li><a href="#page2">这是节点2</a></li>
		<li><a href="#page3">这是节点3</a></li>
		<li><a href="#page4">这是节点4</a></li>
		<li><a href="#page5">这是节点5</a></li>
		<li><a href="#page6">这是节点6</a></li>
		<li><a href="#page7">这是节点7</a></li>
		<li><a href="#page8">这是节点8</a></li>
		<li><a href="#page9">这是节点9</a></li>
	</ul>
</div>
</body>
</html>

效果图：