Подскажите пожалуйста как при помощи javascripta или вообще менять динамически цифры в счетчике. Например пролистывается на 2 секцию и показывает 2/4 на 3 3/4 и т.д.
jQuery(window).scroll(function(){
var $sections = $('section');
$sections.each(function(i,el){
var top = $(el).offset().top-100;
var bottom = top +$(el).height();
var scroll = $(window).scrollTop();
var id = $(el).attr('id');
if( scroll > top && scroll < bottom){
$('a.active').removeClass('active');
$('a[href="#'+id+'"]').addClass('active');
}
})
});
$("nav").on("click","a", function (event) {
// исключаем стандартную реакцию браузера
event.preventDefault();
// получем идентификатор блока из атрибута href
var id = $(this).attr('href'),
// находим высоту, на которой расположен блок
top = $(id).offset().top;
// анимируем переход к блоку, время: 800 мс
$('body,html').animate({scrollTop: top}, 800);
});
section{
font: bold 24px/700px Helvetica, arial, sans-serif;
height: 700px;
text-align: center;
color: #ededed;
text-transform: uppercase;
}
section#block1{
background: #F05222;
}
section#block2{
background: #7CBA01;
}
section#block3{
background: #00A6F0;
}
section#block4{
background: #FFB901;
}
nav{
position: fixed;
right:20px;
top: 20px;
padding: 10px;
border-radius: 5px;
background: #ededed;
}
a{
display: block;
}
a.active{
color: #f95;
}
.counter {
position:fixed;
top: 240px;
right: 20px;
font-size: 25px;
height: 40px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
<a href="#block1"> Block 1 </a>
<a href="#block2"> Block 2 </a>
<a href="#block3" class=""> Block3 </a>
<a href="#block4"> Block 4 </a>
</nav>
<div>
<section id ="block1" class="nav">block 1</section>
<section id ="block2" class="nav">block 2</section>
<section id ="block3" class="nav">block 3</section>
<section id ="block4" class="nav">block 4</section>
<div>
<div class='counter'><span class='active-section'>1</span> <span class='amount-section'>/4</span></div>