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 the 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