当菜单的 class 名称不是“xxx”时，我想链接到锚点下方的 go 50px

Question

I have a top menu inside a div that contains anchor links, like this:

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

When I scroll down the website, a class "wrapfixed" is automatically added on scroll by javascript to make the menu sticky, it becomes like this:

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

I would like the link to go 50px below the anchor, when the class "wrapfixed" is NOT there.

how do you do that?

Thank you

Answer 1

To achieve this you will want to to prevent the default link behavior of # links. Then check the if the links parent menu has the wrapfixed class, so you can set the extra padding. Before using window.ScrollTo to scroll the page to the right location.

Someting like this should work for you:

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

And here is a working demo on Codepen