Login

Navbar scrollspy for brizy

Preview demo
Desktop
Mobile

how to make a simple scrollspy effects using Javascript for brizy ?

When you scroll up or down it will add active "menu-item" based on currently active viewport


1. add custom class name to "menu element" ---> navbar_scrollspy

<img src="https://a-cloud.b-cdn.net/media/iW=5000&amp;iH=*/56e753295f6e8238b5c91a29fd5d3d47.jpg">

2. add custom class name to all "anchor" ---> anchor_id

<img src="https://a-cloud.b-cdn.net/media/iW=5000&amp;iH=*/83dee80218c342a24e974588350b136a.jpg">

3. Create custom anchor links in Menus

Read more: How to create custom anchor links in Menus to link to specific blocks in the page


Copy and paste javascript code to footer

This content has been hidden.

Please Donate or Complete Survey (advertisement) to unlock free.

Download demo

Javascript

<script>
var links = document.querySelectorAll(".navbar_scrollspy li");
var anchor_ids = document.querySelectorAll(".anchor_id");
var current = anchor_ids[0].getAttribute("id");
var links_first = document.querySelectorAll(".navbar_scrollspy li:first-child");
links_first.forEach((item) => {
item.classList.add("brz-menu__item--current");
});
window.onscroll = function() {
anchor_ids.forEach((anchor_id) => {
const sectionTop = anchor_id.getBoundingClientRect().top;
if (60 >= sectionTop) {
current = anchor_id.getAttribute("id");
}
});
links.forEach((item) => {
item.classList.remove("brz-menu__item--current");
if (item.querySelector("a.brz-anchor").href.replace(/.*#/, '') == current) {
item.classList.add("brz-menu__item--current");
} else {
item.classList.remove("brz-menu__item--current");
}
});
};
</script>
Download demo

How to use it

Download file demo.zip, upload to Brizy. Done (Then you can see the css code from here)

  1. Click download demo.zip
  2. To import, go to a page >> click on "add a new block" >> select "saved" tab >> click on "import new block" >> Upload your zip file >> Completed.
  3. Customize to your fancy. Watch the video tutorial here

*Note: License Pro is required for the functions to work

Key word:

how to make a simple scrollspy effects using Javascript for brizycloud?

$5

Published by Philip

Future update

Lifetime support

Live chat - Setup support

Compatible with BrizyCloud & WP

Join premium membership to unlock all pages (no ads)