1

Подскажите как добавлять класс active когда section на 15% виден, и в предыдущего блока убрать класc active?

var $element = $('section');

$element.waypoint(function(direction) {
  if (direction == 'down') {
    $element.addClass('active');
  }

  if (direction == 'up') {
    $element.removeClass('active');
  }
}, {
  offset: '85%'
});
section {
  min-height: 100vh;
  -webkit-transition: background-color .4s ease-out;
  -moz-transition: background-color .4s ease-out;
  -o-transition: background-color .4s ease-out;
  transition: background-color .4s ease-out;
}

section:nth-child(1),
section:nth-child(2) {
  background-color: #23252c
}

section:nth-child(3) {
  background-color: whitesmoke
}

section:nth-child(4) {
  background-color: #23252c
}

section:nth-child(2).active {
  background-color: whitesmoke
}

section:nth-child(3).active {
  background-color: #23252c
}

section:nth-child(4).active {
  background-color: whitesmoke
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>

<body>
  <section class="active">
  </section>
  <section>
  </section>
  <section>
  </section>
  <section>
  </section>
</body>

3
  • Вот такой плагин есть imakewebthings.com/waypoints но нужно разбираться
    – Get-Web
    13 апр 2018 в 12:40
  • @l2banners я добавил этот плагин в код, пробовал сделать, нужно чтобы исправили код, потому что добавляет/удаляет класс сразу у всех section 13 апр 2018 в 12:47
  • Может быть поможет чем-то этот код из этого ответа ru.stackoverflow.com/a/432537/179993 13 апр 2018 в 12:48

2 ответа 2

1

Без библиотеки waypoints

$(function() {
 $("section").each(function() {
    var block = $(this);
    $(window).scroll(function() {
        var top = block.offset().top;
        var bottom = block.height()+top;
        top = top - $(window).height();
        var scroll_top = $(this).scrollTop();
        if ((scroll_top > top) && (scroll_top < bottom)) {
            if (!block.hasClass("active")) {
                block.addClass("active");
            }
        } else {
            block.removeClass("active");
        }
    });
});
});
section {
  min-height: 100vh;
  -webkit-transition: background-color .4s ease-out;
  -moz-transition: background-color .4s ease-out;
  -o-transition: background-color .4s ease-out;
  transition: background-color .4s ease-out;
  background-color: #23252c
}
section.black{
 background-color: #23252c
}
section.white{
 background-color: whitesmoke
}
section.black.active {
  background-color: whitesmoke
}
section.white.active {
  background-color: #23252c
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<body>
  <section>
  </section>
  <section class="black">
  </section>
  <section class="white">
  </section>
  <section class="black">
  </section>
</body>

0

Пока что вот так..

$(function() {
  $('section')
    .waypoint(function(direction) {
      if (direction === 'down') {
        $(this).addClass('active');
      }
    }, {
      offset: '75%'
    })
    .waypoint(function(direction) {
      if (direction === 'up') {
        $(this).removeClass('active');
      }
    }, {
      offset: '75%'
    });
});
section {
  min-height: 100vh;
  -webkit-transition: background-color .4s ease-out;
  -moz-transition: background-color .4s ease-out;
  -o-transition: background-color .4s ease-out;
  transition: background-color .4s ease-out;
  background-color: #23252c
}
section.black{
 background-color: #23252c
}
section.white{
 background-color: whitesmoke
}
section.black.active {
  background-color: whitesmoke
}
section.white.active {
  background-color: #23252c
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://liveam.tv/bootstrap/libs/waypoints/waypoints-1.6.2.min.js"></script>

<body>
  <section>
  </section>
  <section class="black">
  </section>
  <section class="white">
  </section>
  <section class="black">
  </section>
</body>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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