Articles in this section

Hide/reveal sticky navigation on scroll

  • Updated

We do not provide support for hacks, so use them at your own risk. If you're not comfortable with coding, we recommend against using this hack.

For a better user experience, some users may wish to have a sticky navigation bar hide while scrolling down, and then reveal back when scrolling up. We can add this functionality into Semplice by using the Headroom.js plugin.

You can view a live page example of this effect here.

 

headroom-effect.gif

Adding the Javascript

Place the following javascript code under Semplice > Settings > HTML Head. This will load the Headroom plugin into our site.

<script src="https://cdnjs.cloudflare.com/ajax/libs/headroom/0.9.4/headroom.min.js"></script>

You will then need to place the following code under Customize > Advanced > Custom Javascript to initialize the plugin:

var myElement = document.querySelector(".semplice-navbar");
var headroom = new Headroom(myElement);
headroom.init();

Important: you will need to disable Single App mode under Semplice > Settings in order for this plugin to fire correctly. 


Adding the CSS

Place the following code under Customize > Advanced > Custom CSS in Semplice:

.is-frontend .semplice-navbar {position: fixed !important;}
.headroom {
 will-change: transform !important;
 transition: transform 200ms linear !important;
}
.headroom--pinned {
 transform: translateY(0%) !important;
}
.headroom--unpinned {
 transform: translateY(-100%) !important;
}

Related articles