Skip to content

Instantly share code, notes, and snippets.

@solanako
Created July 1, 2019 17:05
Show Gist options
  • Select an option

  • Save solanako/d035e524e9f50b19f98cb3d429817727 to your computer and use it in GitHub Desktop.

Select an option

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
Copy Markdown
<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
Copy Markdown

Wuhu!
Worked sir. Thank you for awesome snippets!

@nWindisch

Copy link
Copy Markdown

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