Menu slide down on scroll when bottom of section is reached

Change static navbar to fixed on scroll when bottom of hero section is reached.

by 8ogdan

HTML

<div class="fullscreen">
  <nav class="static-navbar">
    Static Navbar
  </nav>
  <div style="padding-top: 280px;">HERO SECTION</div>
</div>

<div class="fullscreen bg-red" style="padding-top: 50px; padding-bottom: 50px;">
  <div style="padding-top: 280px;">RED SECTION</div>
</div>

CSS

body {
  margin: 0;
}
.fullscreen {
  width: 100%;
  height: 100vh;
  background-color: #000;
  color: #fff;
  text-align: center;
}
.bg-red {
  background-color: red;
}
.static-navbar {
  width: 100%;
  position: static;
  padding: 25px 0;
  background-color: rgba(0, 0, 0, 1);
  border-bottom: 1px solid rgba(255, 255, 255, .15);
}
.fixed-navbar {
  position: fixed;
  background-color: rgba(255, 255, 255, 1);
  color: #000;
  border-bottom: 1px solid rgba(255, 255, 255, .15);
}

JavaScript

// Navigation state "flag"
var isFixed=false;

$(document).on("scroll", function() {
  var navbar = $(".static-navbar");
  var heroSectionHeight=$(".fullscreen").height();

  // Set fixed
  if( $(window).scrollTop()>=heroSectionHeight && !isFixed ){
    isFixed=true;
    navbar.hide().addClass("fixed-navbar").slideDown(600);
  }

  // Set static
  if( $(window).scrollTop()<heroSectionHeight && isFixed ){
    isFixed=false;
    navbar.slideUp(600,function(){
      navbar.removeClass("fixed-navbar").show();
    });
  }
});