Change URL when scroll into sections

user_17093107 0
Viewed 51

i'm using this code to highlight the navbar when scrolling into sections. Is it possible to change the URL in the address bar instantly when I scroll to an section? Can anyone help me?

Thanks in advance

const [current, setCurrent] = useState('')

const sections = document.querySelectorAll('h3')
const navLi = document.querySelectorAll('nav ul li')

  window.addEventListener('scroll', () => {
    sections.forEach(section => {
      const sectionTop = section.offsetTop 
      if (window.pageYOffset >= sectionTop && (window.pageYOffset + 100) - sectionTop < 200 && current !== section.getAttribute('id')) {
 setCurrent(section.getAttribute('id'))
        
      }
    })
  })

  useEffect(() => {
    navLi.forEach(li => {
      li.classList.remove('test')
      if(li.classList.contains(current)) {
        li.classList.add('test')
      }
    })
  }, [current])

reactjs javascript
1 Answers

Use an intersection observer :) Try this locally with a small borwser window. It will not work with StackOverflow snippets due to CORS / iframe origin issues, the snippets are run in an iframe.

<p class="x">Bloop1</p>
<p>Bleep</p><p>Bleep</p><p>Bleep</p><p>Bleep</p>
<p>Bleep</p><p>Bleep</p><p>Bleep</p><p>Bleep</p>
<p>Bleep</p><p>Bleep</p><p>Bleep</p><p>Bleep</p>
<p>Bleep</p><p>Bleep</p><p>Bleep</p><p>Bleep</p>
<p class="x">Bloop2</p>
<p>Bleep</p><p>Bleep</p><p>Bleep</p><p>Bleep</p>
<p>Bleep</p><p>Bleep</p><p>Bleep</p><p>Bleep</p>
<p>Bleep</p><p>Bleep</p><p>Bleep</p><p>Bleep</p>
<p>Bleep</p><p>Bleep</p><p>Bleep</p><p>Bleep</p>
<p class="x">Bloop3</p>
<p>Bleep</p><p>Bleep</p><p>Bleep</p><p>Bleep</p>
<p>Bleep</p><p>Bleep</p><p>Bleep</p><p>Bleep</p>
<p>Bleep</p><p>Bleep</p><p>Bleep</p><p>Bleep</p>
<p>Bleep</p><p>Bleep</p><p>Bleep</p><p>Bleep</p>
<script>
  // which elements to keep track of when they scroll into view
  const elements = document.querySelectorAll(".x");

  // this is observing when the element will come into view
  const observer = new IntersectionObserver((x) => {
    // this is just to get an example
    const text = x[0].target.textContent;
    console.log(text);

    // this actually changes the URL
    window.history.pushState(text, "Title", "/" + text);
  });

  // register the observer for each element we are interested in
  elements.forEach((x) => {
    observer.observe(x);
  });
</script>
user_6943250
Related