实现导航栏 跟随滚动， 点击导航 页面滚动到相应指定位置？第一次写博客，还望指正不足：wo..菜鸟+1简单的思路是：导航菜单里， 通过给元素指定 data-socrll-id 属性， 来影射 内容区里对应的 元素。如 data-socrll-id="page-a" 对应内容区的 元素 <div id="page-a"></idv>。然后根据 筛查 所有 data-sorcll-id 的的元素， 然后根据 这些元素 找到 对应的内容区。通过监听 window的滚动事件，通过滚动高度来判断那个内容区在当前视口， 从而操作对应的 导航菜单里的状态的转换。 点击导航菜单 触发滚动， 与此相对应。简单的代码思路实现：不知道是不是算自己的一个jquey 插件（jq菜鸟）优化性能：增加节流函数缓存 $()元素对象未完成 可以直接把内容元素信息筛选一遍 放到数组里， 减少 对dom对象的访问<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { 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; } </style></head><body><div class="special-box-con"><div class="nav-list"> <a href="javascript: void(0)" class="nav-scroll" data-socrll-id="page-a">a</a> <a href="javascript: void(0)" class="nav-scroll" data-socrll-id="page-b">b</a> <a href="javascript: void(0)" class="nav-scroll" data-socrll-id="page-c">c</a> <a href="javascript: void(0)" class="nav-scroll" data-socrll-id="page-d">d</a></div> <div class="container"> <div id="page-a"> a </div> <div id="page-b"> b </div> <div id="page-c"> c </div> <div id="page-d"> d </div> </div></div><script src="./js/jquery-2.0.0.min.js"></script><script class="special-plugins"> $.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 } })</script><script> $('.nav-list').navMapScroll('active', 'data-socrll-id')</script></body></htmldemo测试地址
