Elementor is the leading website builder platform for professionals on WordPress. Elementor serves web professionals, including developers, designers and marketers, and boasts a new website created every 10 seconds on its platform.

Learn how to create a fixed/sticky header on scroll with CSS and JavaScript.

Try it Yourself »

How To Create a Fixed Header on Scroll

Step 1) Add HTML:

Example

<div class="header" id="myHeader"> <h2>My Header</h2> </div>

Step 2) Add CSS:

Example

/* Style the header */ .header { padding: 10px 16px; background:

555;

color:

f1f1f1;

}

/* Page content */ .content { padding: 16px; }

/* The sticky class is added to the header with JS when it reaches its scroll position */ .sticky { position: fixed; top: 0; width: 100% }

/* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */ .sticky + .content { padding-top: 102px; }

Step 3) Add JavaScript:

Example

// When the user scrolls the page, execute myFunction window.onscroll = function() {myFunction()};

// Get the header var header = document.getElementById("myHeader");

// Get the offset position of the navbar var sticky = header.offsetTop;

// Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position function myFunction() { if (window.pageYOffset > sticky) { header.classList.add("sticky"); } else { header.classList.remove("sticky"); } }

Try it Yourself »

★ +1

Two keywords specifies the overscroll-behavior value on the x and

overscroll-behavior = [[](https://developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax

brackets) contain [|](https://developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax

single%5Fbar) none [|](https://developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax

single%5Fbar) auto []](https://developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax

brackets)[{1,2}](https://developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax

curly%5Fbraces)

0 axes respectively. If only one value is specified, both x and y are assumed to have the same value.

The default scroll overflow behavior occurs as normal.

Default scroll overflow behavior (e.g., "bounce" effects) is observed inside the element where this value is set. However, no scroll chaining occurs on neighboring scrolling areas; the underlying elements will not scroll. The

overscroll-behavior = [[](https://developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax

brackets) contain [|](https://developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax

single%5Fbar) none [|](https://developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax

single%5Fbar) auto []](https://developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax

brackets)[{1,2}](https://developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax

curly%5Fbraces)

2 value disables native browser navigation, including the vertical pull-to-refresh gesture and horizontal swipe navigation.

No scroll chaining occurs to neighboring scrolling areas, and default scroll overflow behavior is prevented.

By default, mobile browsers tend to provide a "bounce" effect or even a page refresh when the top or bottom of a page (or other scroll area) is reached. You may also have noticed that when you have a dialog box with scrolling content at the top of a page that also has scrolling content, once the dialog box's scroll boundary is reached, the underlying page will then start to scroll — this is called scroll chaining.

In some cases, these behaviors are not desirable. You can use overscroll-behavior to get rid of unwanted scroll chaining and the browser's Facebook/Twitter app-inspired "pull to refresh"-type behavior.

Note that this property applies only to scroll containers. In particular, since an

overscroll-behavior = [[](https://developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax

brackets) contain [|](https://developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax

single%5Fbar) none [|](https://developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax

single%5Fbar) auto []](https://developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax

brackets)[{1,2}](https://developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax

curly%5Fbraces)

6 is not a scroll container, setting this property on an iframe has no effect. To control scroll chaining from an iframe, set overscroll-behavior on both the

overscroll-behavior = [[](https://developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax

brackets) contain [|](https://developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax

single%5Fbar) none [|](https://developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax

single%5Fbar) auto []](https://developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax

brackets)[{1,2}](https://developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax

curly%5Fbraces)

8 and the

overscroll-behavior = [[](https://developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax

brackets) contain [|](https://developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax

single%5Fbar) none [|](https://developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax

single%5Fbar) auto []](https://developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax

brackets)[{1,2}](https://developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax

curly%5Fbraces)

9 elements of the iframe's document.

Initial value

overscroll-behavior = [[](https://developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax

brackets) contain [|](https://developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax

single%5Fbar) none [|](https://developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax

single%5Fbar) auto []](https://developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax

brackets)[{1,2}](https://developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax

curly%5Fbraces)

1Applies tonon-replaced block-level elements and non-replaced inline-block elementsInheritednoComputed valueas each of the properties of the shorthand:

• overscroll-behavior-x: as specified
• overscroll-behavior-y: as specified Animation typediscrete

overscroll-behavior = [[](https://developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax

brackets) contain [|](https://developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax

single%5Fbar) none [|](https://developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax

single%5Fbar) auto []](https://developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax

brackets)[{1,2}](https://developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax

curly%5Fbraces)

In our overscroll-behavior example (see the source code also), we present a full-page list of fake contacts, and a dialog box containing a chat window.

Both of these areas scroll; normally if you scrolled the chat window until you hit a scroll boundary, the underlying contacts window would start to scroll too, which is not desirable. This can be stopped using overscroll-behavior-y (overscroll-behavior would also work) on the chat window, like this:

.messages {
  height: 220px;
  overflow: auto;
  overscroll-behavior-y: contain;
}

We also wanted to get rid of the standard overscroll effects when the contacts are scrolled to the top or bottom (e.g. Chrome on Android refreshes the page when you scroll past the top boundary). This can be prevented by setting

.messages {
  height: 220px;
  overflow: auto;
  overscroll-behavior-y: contain;
}

5 on the

overscroll-behavior = [[](https://developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax

brackets) contain [|](https://developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax

single%5Fbar) none [|](https://developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax

single%5Fbar) auto []](https://developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax

brackets)[{1,2}](https://developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax

curly%5Fbraces)

8 element:

How do I stop my header from scrolling?

The header component needs to be turned into a top-level container, with z-index: 1; and position: fixed; In this way it will remain sticky at the top when you are scrolling.

How do I stop a Web page from scrolling to the top?

Scrolling of the webpage can also be disabled by using only the CSS using the overflow property. In this method, we set the height of the element for which the scroll is disabled to 100% such that it covers all the space of its parent container, and then we set the overflow property to hidden.

How do I stop scrolling when popup is open?

We can use the overflow property to avoid scrolling on the HTML element. Whenever we set the 'hidden' value for the overflow property, it stops scrolling. In this approach, whenever users open the modal, we set overflow to hidden; whenever users close the modal, we will set overflow to auto to allow users to scroll.

How do I turn off overflow scroll?

overflow: hidden. If you use the hidden value, the overflowing part of the content will be cut off. ... .

overflow: scroll. Just like the hidden value the scroll value also cuts the content out. ... .

overflow: auto..