实现导航栏 跟随滚动, 点击导航 页面滚动到相应指定位置?
第一次写博客,还望指正不足: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
a
b
c
d
$.fn.extend({
navMapScroll (active, dataArt) {
// 缓存jquey 查询的元素, 或类名
var pageEqClass = {}
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)
navElems.on('click', function () {
// 点击菜单 滚动到对应的内容区。
var className = $(this).attr(dataArt)
$(window).scrollTop(pageEqClass[className].offset().top)
})
fn()
return this
}
})
$('.nav-list').navMapScroll('active', 'data-socrll-id')
如果觉得《导航栏随页面滚动html 实现随着滚动条滚动 导航会自动切换的效果》对你有帮助,请点赞、收藏,并留下你的观点哦!