Hide/reveal sticky navigation on scroll

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 with some very simple CSS and jQuery code.

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

Adding the jQuery

Navigation to Customize > Advanced > Custom JS in Semplice. If using Single App mode, set the Single App Behavior mode to "Execute after each page transition" from the dropdown. Then place the following jQuery code in the javascript editor:

(function($) {
  var prev = 0;
  var $window = $(window);
  var nav = $('.semplice-navbar');

  $window.on('scroll', function(){
	var scrollTop = $window.scrollTop();
	nav.toggleClass('hide-navbar', scrollTop > prev);
	prev = scrollTop;
  });

  $(window).scroll(function() {
	  if ($(this).scrollTop() <= 300) {
		  $('.semplice-navbar').removeClass('hide-navbar');
	  }
  });
  
})(jQuery);

Important: Make sure you've set the script to execute on each page transition if Single App mode is enabled.

Adding the CSS

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

.is-frontend .semplice-navbar {
  position: fixed !important;
  transition: ease transform 0.3s !important;
}

.semplice-navbar.hide-navbar {
  transform: translateY(-100%) !important;
}