Skip to main content
100%

Fix for Magnifeye, starting on Line 1098.

✓ Published0🌍 Public
Aandreas-groos
Last edited Apr 25, 2026
Created on Apr 25, 2026

This example demonstrates a mobile navigation system for a data-dashboard page, where users can click nav links to scroll to dashboard sections while the active link is automatically highlighted based on scroll position. The code uses plain JavaScript DOM APIs such as `querySelectorAll`, `addEventListener`, and `scrollTo` to manage link styling and smooth scrolling. It also includes a scroll-triggered highlight logic that tracks the viewport position and updates the active pill, while horizontally centering the active link within its container using `offsetLeft` and `clientWidth` calculations. The data source is the page’s own document structure, with no external libraries.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 5374ae5e90acada9f9225c8154461e5f

This visualization presents an interactive tooltip and navigation system built on top of the fullpage.js scrolling framework. The code attaches click handlers to the navigation dots generated by fullpage.js, redirecting users to the corresponding section hash when clicked. It uses jQuery selectors to target the `#fp-nav > ul > li > div` elements and binds a `click` event that navigates via `document.location.href`. The example demonstrates a quick fix for making fullpage.js’s built-in dot navigation clickable, enhancing usability without altering the core library’s behavior. No external data sources or rendering libraries are involved.

UUtopiah
68% match
Loading thumbnail…

Scroll Highlighting (as seen at http://geojson.org/geojson-spec.html)

This example shows a navigation menu that automatically highlights the section currently visible in the viewport as the user scrolls. The code uses jQuery to listen for window scroll and resize events, then checks each heading’s offset position against the viewport bounds to determine which one is active. It applies “active” and “first” CSS classes to corresponding navigation links via `$('#nav a')`, and it runs once on page load. The data comes from the headings’ `id` attributes in the document, as seen in the GeoJSON specification page.

RRestuta
68% match
Loading thumbnail…

Sample for FCC user

This example demonstrates a sticky navigation bar that changes its position based on user scrolling. The page features a hero image with a portfolio introduction, followed by sections for an "About Me" bio and a "Concepts" grid showcasing three project thumbnails (Google Search Page, Pixel Maker, and JavaScript Documentation). The navbar starts at the bottom of the hero section and becomes fixed at the top of the viewport once the user scrolls past the about section, using a scroll event listener and class toggling in JavaScript. The design uses a clean, responsive layout with CSS positioning and hover effects on project cards. Built with React, this example illustrates how to implement a sticky navigation bar that transitions from an absolute to a fixed position based on scroll behavior.

Aandrewbt
65% match
Loading thumbnail…

Untitled

A clickable navigation links to three colored list items (red, green, yellow) inside a horizontally scrollable container. The page uses jQuery and the jquery.scrollTo plugin to smoothly scroll the list to the selected item when a link is clicked, with a 300-millisecond animation. The list is styled with CSS to keep all items in a single row, and the scrolling behavior is triggered by intercepting the anchor click and preventing the default jump.

Aabernier
63% match
Loading thumbnail…

Progress Nav

A scrolling page navigation with an animated SVG marker that highlights the currently visible sections. As the user scrolls, a JavaScript routine calculates the vertical position of each linked section relative to the viewport and dynamically updates a smooth path drawn on a transparent SVG overlay. The path traces the indented table-of-contents links, connecting and highlighting all headings that are on screen at once, with rounded line caps and joints. The code uses `getTotalLength` to measure and animate the path along the outline of the active nav items, creating a continuous progress indicator that responds to scroll position and indent changes.

Aabernier
62% match
Loading thumbnail…

Anchor / Hash Links and Smooth Scrolling with React Router

This example demonstrates smooth scrolling to anchor links within a React application, where clicking a link scrolls to a target section instead of jumping instantly. It shows a simple page with one link that triggers a scroll to a section with the id “section.” The code uses the `react-router-hash-link` library’s `HashLink` component to handle the anchor navigation, and the `smooth-scroll` library, initialized in `componentDidMount` with a selector for all links containing `href*="#"`, to animate the scrolling behavior.

Aallilevine
61% match
Loading thumbnail…

Sample_Leaflet_scrollytelling

This example demonstrates a scrollytelling layout where scrolling through text sections triggers changes in a fixed visual panel. The page uses a two-column design: a scrollable column containing narrative content and a fixed column that updates its displayed information based on the visible section. The code leverages HTML, CSS, and JavaScript to implement the scroll-driven interaction, with `addEventListener('scroll', ...)` detecting visibility changes. It includes the Leaflet and D3 libraries as dependencies, though the core functionality focuses on DOM manipulation for content swapping rather than map rendering. The visible logic handles two content sections, with conditional checks to toggle between corresponding fixed content panels.

FFrancesco Di Filippo
61% match
Loading thumbnail…

Gist a8eb67fdfa76e1f3188f

This example demonstrates a scrolling visualization where sections of text trigger changes in a fixed graphic. The page uses D3’s custom `graphScroll` function to monitor scroll position, highlighting the active text section and applying CSS classes to the visualization to indicate whether it is fixed, scrolling, or below the viewport. The graphic responds to scroll progress, with sections becoming active as the user moves through the page, and the visualization dynamically updates its position relative to the viewport. Rendered with SVG and animation, the piece creates a scroll-driven storytelling experience where the graphic stays pinned while the text scrolls past.

BBenHeubl
61% match