<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);
});
This Pen doesn't use any external CSS resources.