<div class="viewport slide">
  
  <div class="detailnav">
    <div id="wrap" class="container">
      <a href="#test1" class="linky current">test1</a> 
      <a href="#test2" class="linky">test2</a> 
      <a href="#test3" class="linky">test3</a> 
      <a href="#test4" class="linky">test4</a> 
    </div> 
  </div>

  <section class="section1"><a id="test1"></a></section>
  <section class="section2"><a id="test2"></a></section>
  <section class="section3"><a id="test3"></a></section>
  <section class="section4"><a id="test4"></a></section>
  
</div>

* {
  margin:0;
  padding:0;
}

.viewport {
  float:left;
  width:100%;
}

.container {
    width: 80%;
    max-width: 1400px;
  
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

.detailnav {
  position:fixed;
  background:white;
  width:100%;
  text-align:center;
  z-index:1;
  
  #wrap {
    text-align: justify;
    margin: 0px auto;
    padding: 0px;
    height: 122px;
    
    &:after {
      content: "";
      width: 100%;
      display: inline-block;
    }
  }
  
  #wrap > a {
    text-align: center;
    width: auto;
    display: inline-block;
    vertical-align: top;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 50px 0px;
    border-bottom: 3px solid white;
    color: #858585;
    -webkit-transition: 0.3s all ease;
    -moz-transition: 0.3s all ease;
    -ms-transition: 0.3s all ease;
    -o-transition: 0.3s all ease;
    transition: 0.3s all ease;
    
    &.current {
      color: #2d2626;
      border-bottom: 3px solid #1e93c1;
    }
  }
}

.section1,
.section2,
.section3,
.section4 {
  min-height:1000px;
  position: relative;
  display: block;
  width: 100%;
  float: left;
  z-index: 0;

  a {
    position: absolute;
    top: -50px;
    height:20px;
    width:20px;
  }
}

.section1 {
  background: red;
}
.section2 {
  background: blue;
}
.section3 {
  background: yellow;
}
.section4 {
  background: black;
}

  
  var didScroll;

  $(function() {
    $('a').click(function() {
      var target = $(this.hash);
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 300);
        return false;
      }
    });
  });
  
if($('.viewport').hasClass('slide')){
  
var stickyNavTop = $('.detailnav').offset().top; 

          var stickyNav = function(){  
            var scrollTop = $(window).scrollTop();  
                   
            if (scrollTop  > stickyNavTop) {   
                $('.detailnav').addClass('sticky'); 
            } else {  
                $('.detailnav').removeClass('sticky');   
            }  

            var y = $(this).scrollTop();
            $('.linky').each(function (event) {
              var id = $(this).attr('href');
              if (y >= $(id).offset().top - 100) {
                $('.linky').not(this).removeClass('current');
                $(this).addClass('current');
              }
            });
          };
  
      }
  
        $(window).scroll(function() {  
            if($('.viewport').hasClass('slide')){
              stickyNav(); 
              
          }
        });