0

Here is an example: https://www.msdmanuals.com/professional/pulmonary-disorders/diagnostic-and-therapeutic-pulmonary-procedures/bronchoscopy?query=bronchoscopy

Basically it displays a menu with links to parts of the page that get highlighted as the user scrolls past them. How to highlight the menu? How to achieve this in HTML, CSS or JavaScript?

Sample code of HTML:

<section id="main">
    <div class="target" id="1">TARGET 1</div>
    <div class="target" id="2">TARGET 2</div>
    <div class="target" id="3">TARGET 3</div>
    <div class="target" id="4">TARGET 4</div>
</section>
<aside id="nav">
    <nav>
        <a href="#1" class="active">Punkt 1</a>
        <a href="#2">Punkt 2</a>
        <a href="#3">Punkt 3</a>
        <a href="#4">Punkt 4</a>
    </nav>
</aside>
Gretta Keldermann
  • 33
  • 4
  • Does this help? https://stackoverflow.com/questions/32395988/highlight-menu-item-when-scrolling-down-to-section –  Jan 03 '20 at 15:14
  • Check out the cool Intersection Observer API https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API PS: IE still needs a polyfill. – Kazi Sabbir Ibna Ataur Jan 03 '20 at 15:17
  • Does this answer your question? [Highlight Menu Item when Scrolling Down to Section](https://stackoverflow.com/questions/32395988/highlight-menu-item-when-scrolling-down-to-section) – Roy Jan 03 '20 at 15:24

1 Answers1

1

That's what you're looking for is named scrollspy. Try something like that:

<section id="main">
    <div class="target" id="1">TARGET 1</div>
    <div class="target" id="2">TARGET 2</div>
    <div class="target" id="3">TARGET 3</div>
    <div class="target" id="4">TARGET 4</div>
</section>
<aside id="nav">
    <nav>
        <a class="link" id="link_1" href="#1">Punkt 1</a>
        <a class="link" id="link_2" href="#2">Punkt 2</a>
        <a class="link" id="link_3" href="#3">Punkt 3</a>
        <a class="link" id="link_4" href="#4">Punkt 4</a>
    </nav>
</aside>

a.active {
  background-color: #CCCCFF;
}

And JS:

// doesn't require JQuery

function isInViewport(el) {
  const rect = el.getBoundingClientRect()
  const windowHeight = (window.innerHeight || document.documentElement.clientHeight)
  const windowWidth = (window.innerWidth || document.documentElement.clientWidth)
  const vertInView = (rect.top <= windowHeight) && ((rect.top + rect.height) >= 0)
  const horInView = (rect.left <= windowWidth) && ((rect.left + rect.width) >= 0)

  return (vertInView && horInView)
}

window.onscroll = () => {
  for(el of document.getElementsByClassName('list')) {
    el.classList.remove('active')   // reset list    
  }
  // finding element in the viewport
  for(el of document.getElementsByClassName('target')) {
    if(isInViewport(el)) {
      // setting active element
      document.getElementById('link_' + el.id).classList.add('active')
    }
  }
}

That should work for you.

Garbus Uchiha
  • 68
  • 1
  • 6