淘宝请人做网站被骗,企业微信app下载安装安卓版,电商建站系统,做flash网站的软件目录
演示
编辑
需求
代码
css
html
script
代码解释
1、获取所有link-content
2、定义一个rectContent数组#xff0c;然后循环allContents调用getClientRects()[0]获取每个link-content元素与浏览器视口的关系
3、为数组追加link-content#xff0c;用于设置侧…目录
演示
编辑
需求
代码
css
html
script
代码解释
1、获取所有link-content
2、定义一个rectContent数组然后循环allContents调用getClientRects()[0]获取每个link-content元素与浏览器视口的关系
3、为数组追加link-content用于设置侧边栏高亮
情况1
情况2
4、设置高亮
5、添加节流减少触发回调的频率 演示 需求
左侧侧边栏link1、link2...所对应右侧内容link1-content、link2-content...当鼠标点击link的时候自动滚动到对应的content。手动拖动滚动条左侧link进行高亮响应当link2-content出现在视口的时候左侧link2高亮当link2-content和link3-content同时出现在视口的时候左侧link2高亮谁接近视口顶部对应的link高亮。
代码
css * {padding: 0;margin: 0;list-style: none;}.header {height: 200px;background-color: aqua;}.main {padding: 30px 0;display: flex;max-width: 1400px;margin: 0 auto;gap: 30px;}.main .sidebar {position: sticky;top: 0;width: 300px;align-self: start;}.main .content {display: flex;flex: 1;flex-direction: column;gap: 30px;}.main .content .content-item{background-color: aqua;height: 400px;}.main .sidebar ul li{padding: 20px 10px;background-color: aqua;}.main .sidebar ul li .active{color: red;}.footer {height: 200px;background-color: aqua;}
html bodysection classheader/sectionsection classmaindiv classsidebarullia classactive href#content-item1link1/a/lilia href#content-item2link2/a/li // 设置锚点所对应的content的idlia href#content-item3link3/a/lilia href#content-item4link4/a/lilia href#content-item5link5/a/lilia href#content-item6link6/a/li/ul/divdiv classcontentdiv idcontent-item1 classcontent-itemlink1-content/divdiv idcontent-item2 classcontent-itemlink2-content/divdiv idcontent-item3 classcontent-itemlink3-content/divdiv idcontent-item4 classcontent-itemlink4-content/divdiv idcontent-item5 classcontent-itemlink5-content/divdiv idcontent-item6 classcontent-itemlink6-content/div/div/sectionsection classfooter/section/body
script const allLinks document.querySelectorAll(a:link);allLinks.forEach(function (link) {link.addEventListener(click, function (e) {e.preventDefault();const href link.getAttribute(href);if ( href.startsWith(#)) {const sectionEl document.querySelector(href);link_content.scrollIntoView({ behavior: smooth });}});});设置link的href和link-content的id所对应调用scrollIntoView({ behavior: smooth })自动滚动到对应的位置。 const handleScroll () {const allContents document.querySelectorAll(.content-item);const rectContent [];allContents.forEach((ele) {const eleRect ele.getClientRects()[0];if (eleRect.top 0 window.innerHeight - eleRect.top eleRect.height) {rectContent.push(ele);} else if (eleRect.top 0) {rectContent.push(ele);}});let linkIdif (rectContent[0]) linkId rectContent[0].idallLinks.forEach(link link.classList.remove(active))const linkDom document.querySelector(a[href#${linkId}])linkDom.classList.add(active)}window.addEventListener(scroll, function() {throttle(handleScroll, 100)();});window.addEventListener(mouseup, function() {throttle(handleScroll, 100)();});
代码解释
浏览器滚动每次滚动触发scroll回调
1、获取所有link-content 2、定义一个rectContent数组然后循环allContents调用getClientRects()[0]获取每个link-content元素与浏览器视口的关系 3、为数组追加link-content用于设置侧边栏高亮
往数组追加值分两种情况
情况1 link-content1和link-content2都完全出现在视口中谁接近视口顶部对应的link高亮 情况2 都没有出现在视口中则取出现在视口第一个与视口顶部top 0的值 4、设置高亮 let linkIdif (rectContent[0]) linkId rectContent[0].idallLinks.forEach(link link.classList.remove(active))const linkDom document.querySelector(a[href#${linkId}])linkDom.classList.add(active)
找到存储在数组的第一项link-content获取id根据id获取对应的侧边栏link清空之前设置的link的类active为对应的link添加类active。
5、添加节流减少触发回调的频率 const throttle (fn, delay) {let lastExecuted 0;return function() {const now Date.now();if (now - lastExecuted delay) {fn();lastExecuted now;}}}window.addEventListener(scroll, function() {throttle(handleScroll, 100)();});window.addEventListener(mouseup, function() {throttle(handleScroll, 100)();});
