Skip to content

Instantly share code, notes, and snippets.

@solanako
Created July 1, 2019 17:05
Show Gist options
  • Save solanako/d035e524e9f50b19f98cb3d429817727 to your computer and use it in GitHub Desktop.
Save solanako/d035e524e9f50b19f98cb3d429817727 to your computer and use it in GitHub Desktop.
Elementor sticky section hide when scrolling down
<!--Add a html widget with this code under your section and replace the getElementById ("your ID section") with the ID of your section.-->
<script>
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navbar").style.top = "0";
} else {
document.getElementById("navbar").style.top = "-90px";
}
prevScrollpos = currentScrollPos;
}
</script>
<!--If you want to add a small delay in the appearance, enter this custom CSS in your section: selector {transition: all 0.5s ease;}-->
@Alonoparag
Copy link

<script type = "text/javascript"> var prevScrollpos = window.pageYOffset; window.onscroll = function() { var currentScrollPos = window.pageYOffset; if (prevScrollpos > currentScrollPos) { document.getElementById("navbar").style.top = "0"; } else { document.getElementById("navbar").style.top = "-50px"; } prevScrollpos = currentScrollPos; } </script>

and added

#navbar{
transition: top 0.4s;
}

for costume css, worked like a charm for me ;)

@iqbalmauludy
Copy link

Wuhu!
Worked sir. Thank you for awesome snippets!

@nWindisch
Copy link

Thank you so much.
This works like charm.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment