导航栏随页⾯滚动html，实现随着滚动条滚动，导航会⾃动切换
的效果
实现导航栏 跟随滚动， 点击导航 页⾯滚动到相应指定位置？
第⼀次写博客，还望指正不⾜：wo..菜鸟+1
简单的思路是：
导航菜单⾥， 通过给元素指定 data-socrll-id 属性， 来影射 内容区⾥对应的 元素。
如 data-socrll-id="page-a" 对应内容区的 元素
。
然后根据 筛查 所有 data-sorcll-id 的的元素， 然后根据 这些元素 到 对应的内容区。
通过监听 window的滚动事件，通过滚动⾼度来判断那个内容区在当前视⼝， 从⽽操作对应的 导航菜单⾥的状态的转换。 点击导航菜单 触发滚动， 与此相对应。
简单的代码思路实现：
不知道是不是算⾃⼰的⼀个jquey 插件(jq菜鸟)
优化性能：
增加节流函数
缓存 $()元素对象
未完成 可以直接把内容元素信息筛选⼀遍 放到数组⾥， 减少 对dom对象的访问
Title
* {
margin: 0;
padding: 0;
}
.container div {
height: 1000px;
background: red;
border-bottom: 1px solid #fff;
font-size: 64px;
line-height: 1000px;
text-align: center;
}
.nav-list {
position: fixed;
width: 100%;
left: 0;
top: 80px;
background: black;
z-index: 999;
}
.nav-list a {
float: left;
width: 100px;
padding: 20px 0;
line-height: 1;
text-align: center;
color: white;
text-decoration: none;
}
.nav-list a.active {
color: red;
}
a
b
c
d
$.fn.extend({
navMapScroll (active, dataArt) {
/
/ 缓存jquey 查询的元素， 或类名
var pageEqClass = {}
html滚动效果代码
var navEqClass = {}
var pageList = []
var navElems = $(this).find('['+dataArt+']') //节流函数
var thrFn = function (fn, time, maxLog) { var timeK = null
var oTime = new Date().getTime()
var execFn = function () {
fn()
oTime = new Date().getTime()
}
return function () {
var nTime = new Date().getTime()
clearTimeout(timeK)
if (nTime - oTime > maxLog) {
execFn()
} else {
timeK = setTimeout(execFn, time)
}
}
}
var fn = thrFn(function () {
/
/ 判断哪⾥内容区，在当前视⼝。对相应的导航进⾏相应的操作。
let scrollTop = window.pageYOffset || window.document.documentElement.scrollTop for (var k in pageEqClass) {
var elem = pageEqClass[k]
var offsetTop = elem.offset().top
var elemH = elem.outerHeight()
if (offsetTop - scrollTop <= 0 && offsetTop + elemH - scrollTop > 0) {
navEqClass[k].addClass(active)
} else {
navEqClass[k].removeClass(active)
}
}
}, 50, 200)
// 筛查元素
navElems.each(function () {
const $elem = $(this)
const className = $elem.attr(dataArt)
const elem = $('#' + className)
pageList.push(elem)
pageEqClass[className] = elem
navEqClass[className] = $elem
})
$(window).on('scroll', fn)
<('click', function () {
// 点击菜单 滚动到对应的内容区。
var className = $(this).attr(dataArt)
$(window).scrollTop(pageEqClass[className].offset().top) })
fn()
return this
}
})
$('.nav-list').navMapScroll('active', 'data-socrll-id')

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。