Code Challenge #9: Build A Scroll-Spy Navbar

Celý článek

A navigation bar is undoubtedly a really important element considered while designing websites and web pages. In a website, it's utilized in navigating around the site through specific links. However, on a single page, navigation bars are used to quickly navigate through sections or portions of the page. In this challenge, we shall build a navigation bar which tracks the portion of the page currently in view.

The Challenge

In this challenge, it is required to build out a simple navigation bar, content on the page with various HTML elements and implement the tracking feature on the navbar. Once a specific portion of a page comes in the viewport while scrolling, its corresponding title in the navbar should be highlighted. Here is what the final product should look like.

Requirement

As always, feel free to complete this challenge using any tool, technique or framework. However, there is one single requirement, once a portion of the page is scrolled to, its corresponding navigation link on the navigation bar should be highlighted. This way each specified portion currently in the viewport can be readily seen in the navigation bar.

Goals for this challenge

At the end of this challenge, you should be able to:

• Implement scroll-spy on a page by tracking portions or elements in the page and highlighting the navbar.
• Understand DOM traversing and manipulation.

Bonus

As a bonus in this challenge, test your knowledge of JavaScript by completing this in plain Vanilla JavaScript. Also, feel free to change the position of the navbar to the side and animate the highlighting of the menu bar.

Resources

To quickly get this challenge off the ground, a base codepen has been provided containing HTML for the page structure, nav bar and content on the page.

Fork this base codepen as your starting point

Community

Want to receive a review of your challenge submission? Put it out through the following:

• Post your submission in the comment section of this post.
• Post your submission in the Slack channel #codechallenge of the Scotch Slack and also interact with others taking the challenge in the group.
• Post your submission on Twitter and be sure to use the hashtag #scotchchallenge.

Also leave your feedback, comments, and suggestions in the comment section of this post.

Solution

The solution to this challenge will be released on Friday. Happy coding!