Disappearing and Reappearing Navigation Bar

Site URL: https://www.albanyfarms.com/

I want my navigation to disappear when they scroll down but reappear when they scroll up. Anyone know how to code this for version 7.0 in the brine template?

Similar to this website does: 

https://www.jonesbbqkc.com/

@tuanphan do you know?

On 2/21/2022 at 8:02 PM, albanyfarms said:

@tuanphan do you know?

Hi,

Add this code to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function(){
 var visibleTop = 30;
  $(window).scroll(function() {
    var scroll = getCurrentScroll();
      if ( scroll >= visibleTop ) {
           $('header#header').addClass('tuan');
        }
        else {
            $('header#header').removeClass('tuan');
        }
  });
function getCurrentScroll() {
    return window.pageYOffset || document.documentElement.scrollTop;
    }
});
</script>
<style>
  .tuan div#headerNav {
    visibility: hidden !important;
}
</style>