Hide/reveal sticky navigation on scroll in Semplice 6

  • Written
  • Updated

Hide/reveal sticky navigation on scroll is a native feature of Semplice 6! To enable it go to "Customize" > "Navigation" and select the navigation which you want to apply the changes to. Then, inside the "Navbar" tab, set "Hide navbar on scroll" under the "Navbar Styling" to "Enable". If you want to learn more about the navbar customization read this guide.

Enable-Hide-on-Scroll.gif

How to do this with code

If you're on an older version of Semplice, you can upgrade here or continue reading this hack to make this with custom code.

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.

headroom-effect.gif

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;
}

Related articles