How can I make my navigation appear on a certain section of my webpage?

Question

How can I make it disappear on #part1 section then make the navigation bar appear on section #part2,3,4 ?

I tried changing the value from 301 to 0 but the nav bar was still there. On #part1 I don't want the navigation bar to be visible. However, on section 2,3,4 which is known as #part2, #part3, and #part4 I want the navigation to appear.

Here is an example of the concept that I'm trying to get my portfolio to look like in terms of the navigation bar.

Site code

 $(window).on("scroll", function() {
  if ($(this).scrollTop() < 0) {
    $(".navbar").show();
  } else {
    $(".navbar").slideUp(400);
  }

Answer 1

Add var windowHeight = $(window).height(); before the function and change < 0 into > windowHeight

So it will show when you've scrolled down for 100vh

Also add a display: none property to .navbar

So it will hide the navbar initially.