How to Create a Scrollspy Navigation With UIkit

There are different ways to apply scrolling animations in a project. In the past, we’ve covered many of them. For example, we’ve built a project that uses the Intersection Observer API, another one that uses AOS.js, and another one that uses a short JS snippet. Today, we’ll build a page with scrolling animations by taking advantage of UIkit’s Scrollspy component. 

Note: similarly to another recent UIkit tutorial, although not required, some knowledge of this framework will be beneficial. Even if you’ve never used it, I encourage you to give this tutorial a chance. Think of it as a way to learn one or two things about a new framework and how to solve easily common UI tasks with it.

Our Scroll Effect

Here’s what we’re going to create:

For a better experience, be sure to view the page on a large screen and notice two things:

• How the image captions smoothly appear when they come into view.
• How the active menu item of the side navigation changes depending on the scroll position.

UIKit Templates on Envato Elements

Before we start, don’t forget to check out the various HTML templates built with UIKit on Envato Elements, like Freda Personal Resume. On Envato Elements you’ll find millions of creative assets, all ready to use, and with simple commercial licensing. Plus no lock-in contract means you can cancel any time!

And now, on with our own UIKit tutorial!

1. Begin With the Required Assets

To make the layout a bit more unique, beyond the required UIkit files, we’ll also include some handmade SVG illustrations. More specifically:

• An SVG that will replace the typical bullets of the menu items:

• An SVG that will denote the active menu item on scroll:

• An SVG for styling the image captions that comes from a previous tutorial. Have a look at it as we dive into different positioning techniques.

2. Define the HTML Markup

Our page will consist of the following elements:

• Five sections with beautiful Icelandic images taken from Unsplash along with their captions. Each caption will appear with a smooth fade-in animation as it enters the viewport thanks to the uk-scrollspy attribute. This attribute can receive different parameters for customizing the animation. For example, we’re able to pass parameters for deciding if the animation should run every time the element is in view, or if there will be any delay until it appears.
• The side navigation menu. On this element, we’ll use the uk-scrollspy-nav attribute for updating the active menu item depending on the scroll position of our page. To relate a section with a menu item, each menu item should link to the ID of an existing section. Again, we can customize the scrollspy nav by passing an object to the uk-scrollspy-nav attribute.

Additionally, It’s worth mentioning that to build the layout we’ll heavily take advantage of UIkit’s different helper classes, attributes, and components. For consistency reasons, all UIkit classes that start with the uk- prefix will follow any custom ones. Most of the framework classes are self-explanatory but if you need any clarification be sure to read the documentation or open the browser console. Lastly, be sure to check out the Image component to understand how the lazy loading works.

Here’s the corresponding markup:

<section id="skogafoss" class="uk-background-cover uk-background-norepeat uk-position-relative" data-src="skogafoss-iceland.jpg" uk-height-viewport uk-img>
  <div class="uk-position-small uk-position-bottom-center" uk-scrollspy="cls: uk-animation-fade; delay: 200; repeat: true">
    <svg class="uk-position-cover uk-height-1-1" viewBox="0 0 256.6 60.02" preserveAspectRatio="none">
      <path d="M3.98 0c9.31-.01 18.44.99 27.76 1 10.44.01 20.89 0 31.33 0 7.99 0 16.09-.41 24.06.22 10.76.85 21.39.78 32.2.78 4.39 0 8.82.21 13.2.05 4.46-.16 8.62-1.07 13.12-1.05 19.4.1 38.81 0 58.21 0 4.58 0 9.16.02 13.74-.01 5.99-.04 11.84.86 17.8 1.06 6.92.24 14.3.49 21.2-.12-.87.98-1.21 2.86-1.65 4.09-.31.89-.81 2-1.02 2.93-.78 3.31.16 7.86.07 11.25-.1 3.99-1.02 7.75-1.02 11.8v11.02c0 3.58.19 7.22.02 10.8-.13 2.66-.6 2.22-3.15 2.18-4.54-.08-9.09 0-13.63 0-5.38 0-10.75-.02-16.13.02-5.74.05-11.37-.86-17.09-1.07-6.42-.24-12.91.09-19.34.06-4.9-.03-9.57.9-14.44 1.05-2.54.08-5.26-.44-7.78.03-1.32.24-2.48.79-3.82.94-3.63.41-7.47.87-11.13 1.02-4.97.2-9.47-.21-14.38.73-6.11 1.17-13 .22-19.24.22-8.9 0-17.92-.4-26.81-.05-5.32.21-10.52 1.12-15.85 1.07-9.41-.07-18.81-.02-28.2-.02H12.98c-1.5 0-3-.02-4.5 0-1.59.02-2.54-.51-3.72-.78-.89-.2-4.02.24-4.65-.38-.48-.47.81-5.66.87-6.65.17-2.71 1.06-5.14 1.02-7.92-.04-3.34 0-6.68-.02-10.02-.02-4.3.96-7.94 1-12.27.03-4.3-1.41-8.11-2.05-12.2C.61 7.77.02.47 2.71.18c.77 1.2 2.03.84 3.27.82" />
    </svg>
    <span class="uk-display-block uk-position-relative uk-position-z-index uk-text-center uk-text-large">Skógafoss</span>
  </div>
</section>
<!-- four more sections here -->

<nav class="secondary-nav uk-position-fixed uk-overflow-auto" uk-scrollspy-nav="closest: li; scroll: true">
  <ul class="uk-list uk-margin-remove">
    <li class="uk-margin-remove-top uk-margin-bottom">
      <a href="#skogafoss" class="uk-flex uk-link-reset">
        <span class="icons uk-position-relative uk-flex uk-margin-right">
          <img width="20" height="18" data-src="cirle-outlined.svg" alt="" uk-img>
          <img width="19" height="16" class="mark-filled uk-position-center" data-src="circle-filled.svg" alt="" uk-img uk-svg>
        </span>
        Skógafoss
      </a>
    </li>
    <!-- four more items here -->
  </ul>
</nav>

3. Specify the Main Styles

As we’ve seen, the markup includes various utility classes. Given this fact, the CSS will be as minimal as possible.

Most importantly, we’ll define some styles for toggling the visibility of all nav elements on hover and changing the SVG icon of the active menu item.

Here are all the page styles:

:root {
  --green: #47b293;
  --gray: #faf9f8;
  --black: #000;
}

* {
  box-sizing: border-box;
}

html {
  color: var(--black);
  font-family: "Ubuntu Mono", monospace;
}

section[data-src] {
  background-color: var(--gray);
}

section svg {
  fill: var(--green);
}

section span {
  padding: 10px 20px;
  min-width: 185px;
}

.secondary-nav {
  top: 50px;
  right: 0;
  font-size: 20px;
  transform: translateX(calc(100% - 60px));
  transition: transform 0.15s;
}

.secondary-nav:hover {
  transform: none;
}

.secondary-nav ul {
  padding: 20px;
  border-radius: 7px 0 0 7px;
  background-color: rgba(255, 255, 255, 0.5);
}

.secondary-nav .icons {
  flex-shrink: 0;
}

.secondary-nav .icons .mark-filled {
  display: none;
  fill: var(--green);
}

.secondary-nav .uk-active .mark-filled {
  display: block;
}

4. Add the JavaScript

By default, the page navigation will be a fixed positioned element without having a static height. So far, the nav items are only five. But what will happen if they grow? In this case, we should take into account the screen height and decide whether a vertical scrollbar will appear inside the nav or not.

For example, here’s how the navigation with look with ten items:

And here’s with 14 items:

In this case, the nav will have a 50px gap between the top and bottom parts of the screen.

Here’s the required JavaScript code:

const secondaryNav = document.querySelector(".secondary-nav");

setNavBottomPos();
window.addEventListener("resize", function () {
  setNavBottomPos();
});

function setNavBottomPos() {
  const offset = secondaryNav.offsetTop;
  const secondaryNavH = secondaryNav.offsetHeight;
  const windowH = window.innerHeight;

  if (secondaryNavH + offset * 2 > windowH) {
    secondaryNav.style.bottom = offset + "px";
  } else {
    secondaryNav.style.bottom = "auto";
  }
}

Conclusion

Done! Today we took advantage of UIkit’s Scrollspy component and managed to build a useful page scroll effect. Not bad without much effort! Feel free to extend it by using either the Parallax component or writing some custom code for updating the page URL without forcing a page to reload, etc.

Let’s look again at what we built:

As always, thanks a lot for reading!

More UIkit Tutorials

Learn more about this popular frontend framework on Tuts+.

• 
  UIKit
  How to Build a UIkit Lightbox With Dot Navigation
  George Martsoukos