;(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>
效果图：
相关推荐
jQuery滚动插件是用于增强网页滚动效果的一种JavaScript库，它能够帮助开发者轻松实现平滑滚动、无限滚动、滚动监听等多种功能，极大地提升了用户体验。在网页设计中，滚动效果是一个重要的组成部分，它能引导用户...
标题中的“jq滚动栏插件”指的是基于JavaScript库jQuery实现的滚动条插件，这种插件主要用于美化网页的默认滚动条，提供自定义样式和交互效果。jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理...
"JQ删除节点"是jQuery中的一个重要功能，允许开发者从DOM（文档对象模型）中移除元素，从而更新页面内容或优化性能。这篇博客文章（虽然链接不可用）很可能详细解释了这一过程。 删除节点是jQuery中的一个常见任务...
jq 双日历插件日历选择器jq 双日历插件日历选择器jq 双日历插件日历选择器jq 双日历插件日历选择器jq 双日历插件日历选择器jq 双日历插件日历选择器jq 双日历插件日历选择器jq 双日历插件日历选择器jq 双日历插件...
《jQuery图片文字滚动插件详解及应用实践》 在网页设计中，动态效果常常能吸引用户的注意力，提高网站的互动性和用户体验。其中，图片和文字的滚动展示是一种常见且有效的手段，尤其适用于新闻资讯、广告宣传等场景...
描述中的“JQ浏览器滚动条插件 浏览器滚动条美化JQ浏览器滚动条插件 浏览器滚动条美化”强调了这个插件主要针对jQuery库，并且其核心功能是美化浏览器的滚动条。jQuery是一个广泛使用的JavaScript库，它简化了DOM...
《jq年月日上下滑动选择日历插件：打造跨平台日历交互体验》 在现代网页开发中，用户界面的交互性扮演着至关重要的角色。为了提升用户体验，开发者们常常会引入各种各样的插件，其中日历插件是常见的一个组件，尤其...
"很好的jq模拟滚动条"是一个专门针对jQuery库开发的插件，它提供了一种自定义和美化滚动条的方法，以增强网页的视觉效果和用户体验。 jQuery，简称jq，是一个轻量级、功能丰富的JavaScript库，它简化了HTML文档遍历...
本篇文章将深入探讨“JQ创建节点”的知识点，这在构建动态网页时非常关键。 首先，理解DOM（Document Object Model）是至关重要的。DOM是HTML或XML文档的结构化表示，允许程序和脚本动态更新、添加或删除页面元素。...
**jQuery高亮插件——实现文本高亮与关键词查找** jQuery是一个广泛使用的JavaScript库，它极大地简化了HTML文档遍历、事件处理、动画以及Ajax交互。在网页开发中，有时我们需要对页面上的特定文本或者关键词进行...
jQuery全屏页面滚动效果是一种常见的网页交互设计，它能够为用户带来流畅且富有动态感的浏览体验。在网页设计中，这种效果常用于创建引人入胜的单页应用（SPA）或者产品展示页面，使得内容随着用户的滚动动作自然...
Ajax（Asynchronous JavaScript and XML）和jQuery（JQ）结合的滚动加载页面技术，是现代网页开发中的一个重要实践，尤其在大数据量、高交互性的网站中广泛应用。这种技术通过监听用户的滚动行为，当页面接近底部时...
"jq仿滚动条，超简单易用"是一个专门针对jQuery（jq）开发的滚动条插件，旨在提供一种更美观、自定义程度更高的滚动条解决方案，同时考虑到老版本IE浏览器的兼容性。 首先，我们需要理解jQuery（jq）是什么。jQuery...
本文将深入探讨“图片查看 - jq插件”这一主题，重点关注如何使用jQuery来实现图片的单图查看、多图查看、旋转和放大缩小功能。 首先，我们来看“jQueryViewer”这个文件名，这很可能是一个基于jQuery的图片查看器...
在JavaScript的世界里，jQuery（简称JQ）是一个广泛使用的库，极大地简化了DOM操作，包括插入和移动节点。本文将深入探讨JQ如何帮助我们高效地处理这些任务。 首先，让我们理解DOM（Document Object Model）的基本...
"jq 图片上传预览插件"是一个专为jQuery设计的库，它允许用户在实际上传前预览所选图片，提供类似微信发布动态时的图片选择体验。该插件主要解决了非苹果浏览器下的图片预览问题，因为某些浏览器可能不支持原生的...
"图片循环滚动的JQ插件"是基于jQuery开发的一种功能，用于实现网页中图片的连续、无缝隙滚动展示，常用于网站的轮播图或广告展示区域，为用户提供动态视觉体验。 这种插件的核心原理通常是利用CSS样式和JavaScript/...
标题“JQ当前栏目高亮”指的是在网页设计中，使用jQuery（简称JQ）库实现导航栏中当前页面所属栏目的高亮显示效果。这种效果可以提升用户体验，让用户清楚地知道当前所在的位置。在网页设计中，导航栏通常包含多个...
“JQ瀑布流插件”通常是指基于jQuery的、用于实现瀑布流布局的JavaScript插件。这些插件简化了开发者实现瀑布流布局的过程，通过简单的API调用和配置选项，就能在网页上快速构建出美观的瀑布流布局。 这个压缩包中...