0

Подскажите пожалуйста как при помощи 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>

1 ответ 1

4

Берёте переменную-счётчик, меняете её значение по скроллу и выводите в соответствующий спан.

Обратите внимание, что условие про scroll < bottom у Вас лишнее, его нужно убрать, потому что с ним работать не будет.

jQuery(window).scroll(function(){
    var count = 0; //переменная-счётчик
    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){
            $('a.active').removeClass('active');
	    $('a[href="#'+id+'"]').addClass('active');
            count++;//здесь меняется значение
            $('.active-section').text(count);//здесь выводится
        }
    })
 });

$("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: 140px;
  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"> 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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.