Skip to main content
100%

Sample for FCC user

✓ Published0🌍 Public
Aandrewbt
Last edited Jul 4, 2021
Created on Jul 4, 2021

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.

AI-generated description

Similar vizzes

Loading thumbnail…

Untitled

This example demonstrates a fixed-position news list that remains visible while scrolling through a page layout with header, content columns, and footer. The right-side list box uses jQuery scroll events to switch between fixed positioning and bottom-anchored placement, depending on scroll position relative to the content area and footer height. The layout is built with HTML and CSS using floats and a clearfix hack, while the interactive behavior relies on jQuery’s `scroll()` and `height()` methods. The page uses a simple red header, tan content blocks, and a blue fixed box.

JJaloYang
68% match
Loading thumbnail…

Fork of React Starter

This example shows a React application with a fixed left-side navigation menu that stays in place while the page scrolls. The code uses React’s `createRoot` from `react-dom` to render a simple app with a `SideNav` component, which contains links to page sections. The navigation’s styling is defined in a separate CSS file, setting a dark background, fixed width, and full height. The main content area is shifted right with an inline `marginLeft` style to accommodate the sidebar, demonstrating a basic layout pattern with no additional data or interactive behavior beyond the static links.

NNita
67% 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
66% match
Loading thumbnail…

Sliding Navigation Panel Example

This example demonstrates a sliding navigation panel that appears from the right side of the screen when a button is clicked. The panel, styled with the Bulma CSS framework, slides in and out using CSS `transition` properties on the `right` offset. Clicking outside the panel closes it. The page layout includes a fixed header, footer, and main content area, all styled with custom CSS classes, and uses JavaScript event listeners to toggle the panel's active state.

Ccolbygogan
66% match
Loading thumbnail…

Gist 70b6d2687f7832a6ef333872bb170b2d

This example demonstrates a responsive application layout with a collapsible sidebar navigation, built using React and Tailwind CSS. The sidebar includes a logo, search input, and navigation items with icons from the Untitled UI icon library. It uses Headless UI’s `Transition` and `Dialog` components to animate a slide-in mobile menu with overlay backdrop, while desktop layout relies on conditional `clsx` classes for active states. The code shows a `Sidebar` component that accepts navigation items as props, with default items for Home, Simulations, Feedback, and Resources.

EErnestoR
66% 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
65% match
Loading thumbnail…

CSS Position Property + Button

This example demonstrates the CSS `position` property through a single-page scrolling layout with three full-screen sections. It shows how `position: sticky` keeps colored headers pinned to the top while scrolling, and `position: fixed` anchors a navigation footer and a social button to the viewport. The page uses only HTML and CSS, with anchor links (`<a href="#one">`) enabling smooth scrolling via `scroll-behavior: smooth`. Color-coded headers (blue, red, green) visually separate the sections, while a fixed navigation bar and button remain persistently visible.

WWRCIECH
65% match
Loading thumbnail…

Fix for Magnifeye, starting on Line 1098.

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.

Aandreas-groos
65% match