导航栏随页面滚动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

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')