By using’s services you agree to our Cookies Use and Data Transfer outside the EU.
We and our partners operate globally and use cookies, including for analytics, personalisation, ads and Newsletters.

  • Join the Best Unofficial Elementor Support forum

    Provide or get advice on everything Elementor and Wordpress, ask questions, gain confirmation or just become apart of a friendly, like minded community who love Wordpress and Elementor

    Join us!
elementor official

on scroll sticky header



New Member
Hi there,
I am going crazy, since I do not know how to implement my code. I have a slider on my hompage and would like to have the header (navigation) underneath it, but once scrolled passed the slider it shall stick to the top.
It works with "normal"html, but I have no clue how I can get it to work with Elementor... any ideas?
Here is the example code:

<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;

.top-container {
background-color: #f1f1f1;
padding: 30px;
text-align: center;

.header {
padding: 10px 16px;
background: #555;
color: #f1f1f1;

.content {
padding: 16px;

.sticky {
position: fixed;
top: 0;
width: 100%;

.sticky + .content {
padding-top: 102px;

<div class="top-container">
<h1>top container /slider</h1>
<p>Scroll down to see the sticky effect.</p>

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

<div class="content">
<h3>On Scroll Sticky Header</h3>
<p>put enough text in to have to scroll....</p>


window.onscroll = function() {myFunction()};

var header = document.getElementById("myHeader");
var sticky = header.offsetTop;

function myFunction() {
if (window.pageYOffset > sticky) {
} else {


Last edited:

Latest posts

Latest Resources

Other Elementor Resources

elementor official