Скрыть / Показать DIVs на прокрутке

Question

Я пытаюсь найти способ создать своего рода механизм слайд-шоу c, где прокрутка скрывается и показывает определенные c DIV, а после достижения окончательного DIV остальная часть контента становится бесплатной прокруткой. Но это, кажется, что-то далеко за пределами моего базового c понимания jQuery.

У меня есть этот JSFiddle, настроенный на то, что у меня есть сейчас, но он работает только для перехода между первым и вторым DIV: https://jsfiddle.net/psvg5b8k/

В настоящее время я использую идентификаторы для таргетинга DIV, но в идеале сценарий должен автоматически проходить через все div, которым назначен класс ".bd__bg" ( по порядку) перед показом содержимого id = "bd" с бесплатной прокруткой.

$(document).ready(function() {
    var bdBG = $('.bd__bg'),
        bd = $('#bd');

    $(bdBG).each(function() {
    $(this).hide();
    });
  // $(bd).hide();

    $('#01').show();
});

$(window).scroll(function() {                
    if ($(this).scrollTop() > 200) {
        $('#01').fadeOut();
        $('#02').fadeIn();
    } else if ($(this).scrollTop() > 400) {
        $('#02').fadeOut();
        $('#03').fadeIn();             
    } else if ($(this).scrollTop() > 600) {
        $('#03').fadeOut();
        $('#04').fadeIn();
    } else {
        $('#04').fadeOut();
        // $(bd).fadeIn();
    }
});

<div class="grid">
    <div class="grid__row bd__bg" id="01">
    </div>
</div>
<div class="grid">
    <div class="grid__row bd__bg" id="02">
    </div>
</div>
<div class="grid">
    <div class="grid__row bd__bg" id="03">
    </div>
</div>
<div class="grid">
    <div class="grid__row bd__bg" id="04">
    </div>
</div>
<div class="grid">
    <div class="grid__row" id="bd">
    </div>
</div>

Answer 1

В вашем состоянии одна ошибка:

if ($(this).scrollTop() > 200) {

всегда верно для значений> 400, 600 и c. а также, чтобы вы всегда оставляли оператор в своем первом условии.

Если вы пытаетесь сделать какое-то Слайд-шоу / Flipbook et c, я бы предпочел использовать сам скроллвент для запуска вашего действия, чем с помощью число c значение прокрутки.

$(window).bind('mousewheel DOMMouseScroll', function(event){
    if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
        previousPage($('#flipbook'));
    }
    else {
        nextPage($('#flipbook'));
    }
});

function nextPage( $book ) {
	let $activePage = $book.find('.page.active');
  let $nextPage = ($activePage.next().length > 0) 
  	? $activePage.next() 
    : $book.find('.page').first();
  $activePage.removeClass('active');
  $nextPage.addClass('active');
}

function previousPage( $book ) {
	let $activePage = $book.find('.page.active');
  let $previouspage = ($activePage.prev().length > 0) 
  	? $activePage.prev() 
    : $book.find('.page').last();
  $activePage.removeClass('active');
 	$previouspage.addClass('active');
}

.page{
  width:100%;
  height:100%;
  padding: 5rem;
  position: absolute;
  top:0;
  left:0;
  display:none;
}

.page.active{
  display:block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div id="flipbook">
  <div class="page bg-primary active">
    <h1>01</h1>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </div>
  <div class="page bg-warning">
    <h1>02</h1>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </div>
  <div class="page bg-danger">
    <h1>03</h1>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </div>
  
</div>