How to Prevent Navbar from Lifting Up (Rubber Band Effect)

By Posted on

When scrolling too hard on website, you might notice your fixed navbar lifts up and bounces back down. This is called the rubber band effect or overscroll bounce.

The Problem

  • Fixed navbar moves up when scrolling past the page boundaries
  • Creates a jarring visual experience
  • Reveals background behind the navbar temporarily

The Solution

Add overscroll-behavior-y: none to prevent scroll bouncing.

Step 1: Add to Global CSS

/* In your global CSS file (e.g., style.css) */
  html, body {
    overscroll-behavior-y: none;
  }

Step 2: Add to Scrollable Containers

If you have multiple scroll containers (sidebars, main content), add it to each: 

 /* For fixed sidebars */
  .sidebar {
    overflow-y: auto;
    overscroll-behavior-y: none;
  }

  /* For main content area */
  .main-content {
    overflow-y: auto;
    overscroll-behavior-y: none;
  }

Or inline style: 

<main style="overflow-y: auto; overscroll-behavior-y: none;">
    <!-- Your content -->
</main>

Browser Support

overscroll-behavior is supported in all modern browsers (Chrome, Firefox, Safari, Edge).

That’s it! This simple CSS property prevents the rubber band effect and keeps your fixed elements stable. Happy coding!!!