Como funciona um section menu

Como funciona um section menu

HTML

<div id="container">
  <div class="row">
    <div class="col-sm-12">
      <div id="menu">
        <button type="button" id="btn-section-one" class="btn navbar-btn btn-primary btn-sm">Section One</button>
        <button type="button" id="btn-section-two" class="btn navbar-btn btn-default btn-sm">Section Two</button>
        <button type="button" id="btn-section-three" class="btn btn-default navbar-btn btn-sm">Section Three</button>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-12">
      <div class="section" id="section-one">Section One</div>
    </div>
    <div class="col-sm-12">
      <div class="section bg-color" id="section-two">Section Two</div>
    </div>
    <div class="col-sm-12">
      <div class="section" id="section-three">Section Three</div>
    </div>
  </div>
</div>

CSS

#menu {
      margin-left: 15px;
    }
    
    .navbar-btn {
      border-radius: 0 !important;
    }
    
    .section {
      height: 400px;
      border: 1px solid #CCC;
      margin-left: 10px;
      margin-top: 5px;
    }
    
    .bg-color {
      background-color: #999;

JavaScript

var range = [];
$(window).scroll(function() {
  var posSectionOne = $('#section-one').offset();
  var posSectionTwo = $('#section-two').offset();
  var posSectionThree = $('#section-three').offset();
  var windowHeight = $(this).scrollTop();
  var menu = $('#menu');
  var objCssMenu = {
    'position': 'fixed',
    'z-index': 2
  }
  if (windowHeight > 80) {
    menu.css(objCssMenu);
  } else if (windowHeight < 80) {
    menu.prop('style', '');
  }

  if (windowHeight > posSectionTwo.top) {
    $('#btn-section-two').addClass('btn-primary');
    $('#btn-section-one').removeClass('btn-primary').addClass('btn-default');
  }
  if (windowHeight < posSectionTwo.top) {

    $('#btn-section-one').addClass('btn-primary');
    $('#btn-section-two').removeClass('btn-primary').addClass('btn-default');
  }
});