<div id="wrap">

    <!-- section -->
    <div class="section">
      <div class="center">
        
        <div id="nav">
          <div class="nav">Nav#1</div>
          <div class="nav">Nav#2</div>
          <div class="nav">Nav#3</div>
          <div class="nav">Nav#4</div>
          <div class="nav">Nav#5</div>
        </div>
        
        <div id="blocks">
          <div class="block">Block#1</div>
          <div class="block">Block#2</div>
          <div class="block">Block#3</div>
          <div class="block">Block#4</div>
          <div class="block">Block#5</div>
        </div>
        
      </div>
    </div>
    <!--/section -->

  </div>
html,
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.4;
  color: #555;
  background: #fff;
}

* {
  box-sizing: border-box;
}

#wrap {
  position: relative;
  padding-top: 42px;  
}


#nav {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  display: flex;
  background: #fff;
}

.nav {
  padding: 10px;
  cursor: pointer;

  &:hover,
  &--active {
    color: #5c7af5;
  }
  
  &--active {
    cursor: default;  
  }
}

.block {
  padding: 10px;
  height: 600px;
}
View Compiled
var $navs = $('.nav');

$(window).on('load scroll', function () {
  $('.block').each(function () {
    var $block = $(this),
      blockIndex = $block.index(),
      blockOffset = $block.offset().top,
      blockHeight = $block.innerHeight(),
      winScroll = $(window).scrollTop();
    
    if(winScroll >= blockOffset && winScroll <= blockOffset + blockHeight) {
      $navs.eq(blockIndex).addClass('nav--active').siblings().removeClass('nav--active');
      
      //  для картинок пример
      if(blockIndex == 2) { // если достигнут, к примеру, третий блок, то подсветить классом такую-то картинку
        $('.моя_каринка').addClass('active');
      } else {
        $('.моя_каринка').removeClass('active');
      }
    } else {
      $navs.eq(blockIndex).removeClass('nav--active');
    }
  });
});

$navs.click(function() {
  var navIndex = $(this).index(),
    scrollToBlock =  $('.block').eq(navIndex).offset().top;
  
  $('html, body').stop().animate({
    scrollTop: scrollToBlock
  }, 1000);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js