Hide/Show DIVs on scroll

Question

I'm trying to figure out a way to have a sort of slideshow mechanic where scrolling hides and shows specific DIVs, and after the final DIV has been reached the rest of the content becomes free scrolling. But this seems to be something way beyond my basic understanding of jQuery.

I have this JSFiddle set up for what I have right now, but it only works for the transition between the first and second DIV: https://jsfiddle.net/psvg5b8k/

I'm currently using IDs to target the DIVs, but ideally the script should automatically run through all of the divs that have the class ".bd__bg" assigned (in order) before showing the content of id="bd" with free scrolling.

$(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>

It's kind of hard to understand the expected behaviour atm. But if you try to make a Slideshow you could jsut determine weather you scroll up or down and then `flip 1 page ahead or back`: Take a look [here](https://stackoverflow.com/questions/8189840/get-mouse-wheel-events-in-jquery) how to use the scrollwheel events in jquery — Lapskaus, Apr 23 '20 at 10:10

score 1 · Accepted Answer · answered Apr 23 '20 at 10:33

One error is in your condtion:

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

is always true for values > 400, 600 etc. aswell, so that you always leave the statement in your first condition.

If you are trying to do some sort of Slideshow / Flipbook etc i would rather use the scrollevent itself to trigger your action than using a numeric scroll value.

$(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>

Thanks, this does indeed seem to work better! Is there a way I could adapt this to "lock" the scroll for like 1000ms per page, so that an eager user isn't going from 1 to XX in one swift scroll? — Bolteh, Apr 23 '20 at 12:00
you can implement a [throttle function](https://stackoverflow.com/questions/18177174/how-to-limit-handling-of-event-to-once-per-x-seconds-with-jquery-javascript) that limits the event triggering here is a working [fiddle](https://jsfiddle.net/eyskmacg/2/). Keep in mind though that this might result in a bad user experience.... you wont be able to flip through pages quickly if you want to — Lapskaus, Apr 23 '20 at 12:07
Thanks a lot! My design is going to have animations that play for 1s, so user experience should be okay as it doesn't really prevent info from showing. I'm looking for a similar experience as seen on https://www.mckinsey.com, but with less delays — Bolteh, Apr 23 '20 at 12:15

Hide/Show DIVs on scroll

1 Answers1