How to Change Header Upon Scrolling in Elementor

Creating a Header section that changes upon scroll with Elementor requires the use of a small Javascript file and a few lines of CSS. In this tutorial, we will learn how to accomplish this.

Let’s Get Started

  1. Create a section in your header. In this example, It will be placed below the main header section.
  2. From the Advanced Tab, give the section a Z-index of 999. This will ensure that it remains on top of other elements on the page.
  3. In the Elementor Custom Code feature, create a new Custom Code. Name this one Header On Scroll for an example. You may name it as you wish. Paste the Javascript code from below into the region. Publish your Custom code. (Tip: If you do not have Elementor Pro, you may place this script in an HTML widget in the parent section.)

    Free Version Example:
  4. In the Custom CSS area of your Site Settings, Place the CSS code supplied below and save your Settings.
  5. Finally, in the Advanced Tab of our section again, we will add the CSS ID we named in the script (example: headeronscroll). The section should now be hidden at the top of your page. You may need to adjust the values in the code if slightly visible (see below).

Publish Your Work

Your scrolling effect is now finished. You may publish your work and preview the effect in a new tab. You may need to make small adjustments for the finished design.

Note: It is best to preview this in an incognito browser. The WordPress Admin Bar will obscure slightly to logged in users. You may also need to account for this in your design.


Footer Example

Here is an example of the same effect in a footer.


The Code Snippets

Place these snippets in the above mentioned places to enable the effect. The two highlighted values may be changed based on the location you wish the element to appear, and the height of your section. Additional customizations can be made to the CSS region if you wish the element to appear in a different location.

The Header Script File: Place In Elementor Custom Code

Important: You need to wrap the following in script tags (See Image Above).

document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 175) { /* change this value here to make it show up at your desired scroll location. */
$('#appearonscroll').addClass('headerappear');
} else {
$('#appearonscroll').removeClass('headerappear');
}
});});});

The Header CSS File: Place In Custom CSS Region

/* Header On Scroll CSS */
.elementor-nav-menu__container{ top:0px!important;}
#headeronscroll.headerappear{ transform: translateY(0);}
#headeronscroll{ position: fixed; top:0; width: 100vw; -webkit-transition: transform 0.34s ease; transition : transform 0.34s ease; transform: translateY(-95px); /*adjust this value to the height of your header*/}
/* End Code */

The Footer Script File: Place In Elementor Custom Code

Important: You need to wrap the following in script tags(See Image Above).

document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 250) { /* change this value here to make it show up at your desired scroll location. */
$('#footeronscroll').addClass('footerappear');
} else {
$('#footeronscroll').removeClass('footerappear');
}
});});});

The Footer CSS File: Place In Custom CSS Region

/* Footer On Scroll CSS */
.elementor-nav-menu__container{ bottom:0px!important;}
#footeronscroll.footerappear{transform: translateY(0);}
#footeronscroll{position: fixed; bottom:0; width: 100vw; -webkit-transition: transform 0.34s ease; transition : transform 0.34s ease; transform: translateY(185px); /*adjust this value to the height of your footer*/}
@media screen and (max-width: 780px) {
#footeronscroll{ position: fixed; bottom:0; width: 100vw; -webkit-transition: transform 0.34s ease; transition : transform 0.34s ease; transform: translateY(180px); /*adjust this value to the height of your footer*/}}
/* End Code */

Share it on social networks

Share on facebook
Share on twitter
Share on linkedin
Share on email
Was this article helpful?

Get Started With Elementor Today

Join millions of professionals who use Elementor to build WordPress websites faster and better than ever before