Scrollable webpage navigation

Question

I made a scrollable webpage. What I want to do is to highlight a button from the navigation when it is pressed and when I am viewing the content from it. When I scroll down more the next button from the navigation must be triggered. Here is my code:

.container {
  width: 100%;
  height: 100px;
  position: relative;
  font-family: 'Trebuchet Ms';
}

.bg {
  background: #000;
  width: 100%;
  height: 100px;
  opacity: 0;
}

.show {
  opacity: 0.6;
}

.transition {    
  -webkit-transition: all 1s ease-in-out;
 -moz-transition: all 1s ease-in-out;
 -o-transition: all 1s ease-in-out;
 transition: all 1s ease-in-out;
}

.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}

ul {
  height: 200px;
  margin: -70px auto 0 auto;
  width: 810px;
}

li {
  float: left; 
  list-style: none;
  margin: 10px 20px;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: #000;
}

a {
  text-align: center;
  font-size: 15px;
  color: #CFB547;
  font-weight: bold;
  text-decoration: none;
  letter-spacing: 5px;
  
  position: relative;
  z-index: 1;
  margin: 0 auto;
  display: block;
}

a:hover {
  color: #a6a6a6;
  text-shadow: 1px 1px 1px 1px;
  text-decoration: none;
}

.down {
  top: 150px;
}

.up {
  top: 1800px;
}

<section id="top">
<div id="top" class="container">
<div class="fixed">
<div class="bg transition">
</div>
<ul>
<li><a href="#top">Crystal Beach</a></li>
<li><a href="#about">Apartments</a></li>
<li><a href="#blanktwo">Facilities</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</section>

$(window).scroll(function() {
// 100 = The point you would like to fade the nav in.
  
 if ($(window).scrollTop() > 100 ){
    
   $('.bg').addClass('show');
    
  } else {
    
    $('.bg').removeClass('show');
    
  };    
});

$('.scroll').on('click', function(e){  
  e.preventDefault()
    
  $('html, body').animate({
      scrollTop : $(this.hash).offset().top
    }, 1500);
});

Answer 1

Here you go https://jsfiddle.net/mekwall/up4nu/

// Cache selectors
var lastId,
    topMenu = $("#top-menu"),
    topMenuHeight = topMenu.outerHeight()+15,
    // All list items
    menuItems = topMenu.find("a"),
    // Anchors corresponding to menu items
    scrollItems = menuItems.map(function(){
      var item = $($(this).attr("href"));
      if (item.length) { return item; }
    });

// Bind click handler to menu items
// so we can get a fancy scroll animation
menuItems.click(function(e){
  var href = $(this).attr("href"),
      offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
  $('html, body').stop().animate({ 
      scrollTop: offsetTop
  }, 300);
  e.preventDefault();
});

// Bind to scroll
$(window).scroll(function(){
   // Get container scroll position
   var fromTop = $(this).scrollTop()+topMenuHeight;

   // Get id of current scroll item
   var cur = scrollItems.map(function(){
     if ($(this).offset().top < fromTop)
       return this;
   });
   // Get the id of the current element
   cur = cur[cur.length-1];
   var id = cur && cur.length ? cur[0].id : "";

   if (lastId !== id) {
       lastId = id;
       // Set/remove active class
       menuItems
         .parent().removeClass("active")
         .end().filter("[href=#"+id+"]").parent().addClass("active");
   }                   
});