;(function($) {
$.fn.scrollHighlight = function(options) {
return this.each(function() {
var defualts = {
childItem: "a", //highlighted node
attribute: "href", //Highlight node attribute
highlight: 'highlight', //The class added to the highlighted node
buffer: 0, // distance from the node
container: window, //The box for scrolling content, the default is window
cancelFlag: true, //whether to cancel the highlight when it exceeds the node, the default is to cancel the highlight
mode: 'vertical' //Scrolling mode, the default is vertical direction, can be other such as horizontal (horizontal direction)
};
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)); //Get all nodes that need to be highlighted
}
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")) { //Filter out the nodes that exist in the container and display them
wrap.push(anchor[j]); //Place the node in the array wrap
index.push(j); //Filter out their positions
}
}
var wLen = wrap.length;
// function when scrolling
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("Scroll height"+xy);
for (var i = 0; i < wLen; i++) {
if (mode == 'vertical') {
//When the default is vertical scrolling, get the position of the above node and compare it with the scrolling height. When the scrolling height is greater than it, highlight it.
//When the scroll height exceeds its position plus its height, cancel the highlight of the node
pos.push($(wrap[i]).offset().top);
myPos(i); //Highlight function
if (opts.cancelFlag && (pos[i] < xy - $(wrap[i]).outerHeight())) {
item.eq(index[i]).removeClass(highlight);
}
} else {
//When the scrolling mode is horizontal, get the left position of the node and compare it with the pulling value. When the pulling value is greater than its position, highlight
//When the pulled value exceeds its left position plus its outer border length, cancel the node highlight
pos.push($(wrap[i]).offset().left);
myPos(i); //Highlight function
if (opts.cancelFlag && (pos[i] < xy - $(wrap[i]).outerWidth())) {
item.eq(index[i]).removeClass(highlight);
}
}
}
//The scroll value is greater than the element position to add highlight
function myPos(i) {
if (pos[i] <= xy) {
item.removeClass(highlight).eq(index[i]).addClass(highlight);
}
}
}
//Click to jump to the corresponding position
item.each(function(index) {
$(this).click(function() {
console.log("Node offset"+$("#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);
}
}
})
})
// Execute the following code when there is scrolling
$container.on("scroll", function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(onScroll, 100);
// alert("yes");
});
// When the screen is found to be resized, re-execute the code
$(window).on("resize", function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(onScroll, 100);
});
});
};
})(jQuery);
demo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQ scrolling highlight node plugin</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>This is the highlighted node 1 from the left scroll to the right here</h3>
</li>
<li id="page2">
<h3>This is the highlighted node 2 on the right scrolled to the left here</h3>
</li>
<li id="page3">
<h3>This is the highlighted node 3 from the left scroll to the right here</h3>
</li>
<li id="page4">
<h3>This is the highlighted node 4 from the left scroll to the right here</h3>
</li>
<li id="page5">
<h3>This is the highlighted node 5 on the right scrolled to the left</h3>
</li>
<li id="page6">
<h3>This is the highlighted node 6 on the right scrolled to the left here</h3>
</li>
<li id="page7">
<h3>This is the highlighted node 7 from the left scroll to the right here</h3>
</li>
<li id="page8">
<h3>This is the highlighted node 8 from the left scroll to the right here</h3>
</li>
<li id="page9">
<h3>This is the highlighted node 9 on the right scrolled to the left here</h3>
</li>
<li id="page10">
<h3>This is the highlighted node 10 on the right scrolled to the left here</h3>
</li>
</ul>
</div>
<div class="sidebar">
<ul>
<li><a href="#page1">This is node 1</a></li>
<li><a href="#page2">This is node 2</a></li>
<li><a href="#page3">This is node 3</a></li>
<li><a href="#page4">This is node 4</a></li>
<li><a href="#page5">This is node 5</a></li>
<li><a href="#page6">This is node 6</a></li>
<li><a href="#page7">This is node 7</a></li>
<li><a href="#page8">This is node 8</a></li>
<li><a href="#page9">这是节点9</a></li>
</ul>
</div>
</body>
</html>
Effect picture: