时间戳

首页 > 解决方案 > 当菜单的类名不是“xxx”时，我希望链接在锚点下方 50px

javascript - 当菜单的类名不是“xxx”时，我希望链接在锚点下方 50px

问题描述

我在包含锚链接的 div 中有一个顶部菜单，如下所示：

 <div id="menu">
   <ul>
     <li>
       <a href="#item1">ITEM 1</a>
     </li>
     <li>
       <a href="#item2">ITEM 2</a>
     </li>
     <li>
       <a href="#item3">ITEM 3</a>
     </li>
   </ul>
 </div>

当我向下滚动网站时，javascript会在滚动时自动添加一个“wrapfixed”类以使菜单具有粘性，它变成这样：

<div id="menu" class="wrapfixed">...</div>

当“wrapfixed”类不存在时，我希望链接在锚点下方 50px 处。

你是怎样做的 ？

谢谢

标签： javascripthtmlcssanchor

解决方案

要实现这一点，您需要阻止 # 链接的默认链接行为。然后检查链接父菜单是否有wrapfixed类，以便您可以设置额外的填充。在使用之前window.ScrollTo将页面滚动到正确的位置。

像这样的东西应该适合你：

function scrollToLinks(){
    var links = document.querySelectorAll("a");
    for (let i=0, len=links.length; i < links.length; i++) {
      links[i].addEventListener("click", function(event) {
        event.preventDefault();
        const index = event.target.href.indexOf('#');
        const selector = event.target.href.substring(index);
        const target = document.querySelector(selector);
        const box = target.getBoundingClientRect();
        const padding = event.target.parentNode.parentNode.parentNode.classList.contains('wrapfixed') ? 50 : 0;
        const y = box.top + padding;
        window.scrollTo(0, y);
      })
    }
}
window.addEventListener("load", scrollToLinks);

这是Codepen 上的工作演示

推荐阅读