Как сделать плавающее меню с анкорами?

Вообщем переделал под себя плавающее меню с анкорами, но не знаю как сделать так, чтобы когда прокручиваешь страницу до самого верха менялся header. Ну и может у кого-то есть более хорошее решение.

<header class="visible">
        <div class="container">
            <div class="row">
                <div class="col-3">
                    <a href="#" class="logo">Logo</a>
                </div>
                <div class="col-9">
                    <nav class="menu">
                        <a href="#1" class="active">Link 1</a>
                        <a href="#2">Menu 2</a>
                        <a href="#3">link 3</a>
                        <a href="#4">Menu 4</a>
                        <a href="#5">Link 5</a>
                    </nav>
                </div>
            </div>
        </div>
    </header>

    <header class="sticky invisible">
        <div class="container">
            <div class="row">
                <div class="col-3">
                    <a href="#" class="logo">Logo</a>
                </div>
                <div class="col-9">
                    <nav class="menu">
                        <a href="#1" class="active">Link 1</a>
                        <a href="#2">Menu 2</a>
                        <a href="#3">link 3</a>
                        <a href="#4">Menu 4</a>
                        <a href="#5">Link 5</a>
                    </nav>
                </div>
            </div>
        </div>
    </header>

    <div id="1" class="section1" style="background: black;height:800px;margin-top:200px;">
        <div class="container">
            <div class="row">
            </div>
        </div>
    </div>

    <section id="2" style="background: gray;height:500px;"></section>
    <section id="3" style="background: yellow;height:1800px;"></section>
    <section id="4" style="background: purple;height:1200px;"></section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>




.visible {
  visibility: visible !important;
}
.invisible {
  visibility: hidden !important;
}

header {
    padding: 25px 0;
}

.logo {
    font-size: 32px;
  float: left;
}

.menu a {
    margin-left: 40px;
    color: #0f1010;
  float: right;
}

header.sticky {
    background-color: rgba(0,0,0,0.5);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
}

header.sticky .logo {
    color: #fff;
}

header.sticky .menu a {
    color: #fff;
}

var sections = $('section, .section1')
    , nav = $('header.sticky')
    , nav_height = nav.outerHeight();

    $(window).on('scroll', function () {
      var cur_pos = $(this).scrollTop();
      $('header').removeClass('visible').addClass('invisible');
      nav.removeClass('invisible');

      sections.each(function() {
        var top = $(this).offset().top - nav_height,
        bottom = top + $(this).outerHeight();

        if (cur_pos >= top && cur_pos <= bottom) {
          nav.find('a').removeClass('active');
          sections.removeClass('active');

          $(this).addClass('active');
          nav.find('a[href="#'+$(this).attr('id')+'"]').addClass('active');
      }
  });
  });

    nav.find('a').on('click', function () {
      var $el = $(this)
      , id = $el.attr('href');

      $('html, body').animate({
        scrollTop: $(id).offset().top - nav_height
    }, 1500);

      return false;
  });

https://codepen.io/Dizzol/pen/GRgVmdo