DON’T REVENT THE WHEEL

ScrollSpy in Angular, React or Vue.js

How to implement ScrollSpy without any 3rd party library

The ScrollSpy effect can be seen everywhere, but normally from the traditional pure static websites, which were implemented with JQuery like

$('body').scrollspy({    target: '#navbar',    offset: 80});

That’s simple, but how to implement it in Angular, React, or Vuejs since we’re using the MODERN & POWERFUL frameworks.

Okay, try to google it with angular scrollspy, or react scrollspy.

I reckon you’ve got bunches of posts from StackOverflow, technique blogs, or even several well-designed npm packages.

Forget them! Nothing wrong, just too complicated.

Actually, what you need is just a single one line ()

<your-component ><nav class="navbar">
<ul class="navbar-nav">
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
...
</nav>

<!-- Section 1 -->
<div id="section1">
...
</div>
<!-- Section 1 -->
<div id="section">
...
</div>

Okay, I confess the title is misleading readers. But I’m pretty sure you won’t find this article if the title is not like that.

Anyway, I hope it helps. Enjoy!