DON’T REVENT THE WHEEL

ScrollSpy in Angular, React or Vue.js

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 (if you’re using Bootstrap 4)

<your-component data-spy="scroll" data-target=".navbar" data-offset="50"><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!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store