Code Snippet_

Sticky_
On ScrollUp

Menu

Code Caviar_

Know_
The Code

145636.jpg

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

267350.jpg
[ Get Code ]

Sticky ScrollUp Menu is a free Elementor template.

Do you like it?

Download Now
  1. Give Header section ID of “navbar”
  2. Give it a higher z-index i.e. 999
  3. Set section’s initial background color.
  4. paste css into section’s custom css and adjust .stky background color as needed.

CSS:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
body:not(.elementor-editor-active) selector {
    position: fixed;
    transition: all 300ms ease-in-out !important;
    width: 100%;
}
body:not(.elementor-editor-active) selector.hide {
    transform: translateY(-100%);
}
selector.stky {
    background-color: #ff00cc !important;
}
  1. Add HTML element at bottom of page
  2. Paste code below w/ script tags
  3. Save, clear cache and preview

Javascript:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<script type="text/javascript">
    (function($){
        var zero = 0;
        $(window).on('scroll',function(){
            $('#navbar').toggleClass('hide', $(window).scrollTop() > zero);
            if ($(window).scrollTop() >= 100){
                $("#navbar").addClass("stky");
            } else {
                $("#navbar").removeClass("stky");
            }
            zero = $(window).scrollTop();
        });
    })(jQuery);
</script>