Show div on scroll down effect in a page that occupies full height

Question

I have the following structure:

<body>
    <div id="first-div">
      <div id="second-div"></div>
      <div id="third-div"></div>
    </div>
</body>

#first-div {
      height: 100%;
}
#second-div, #third-div {
  display: none;
}

Upon detecting the first scroll down event I need the #second-div to be displayed, If a second scroll down event is detected, I need #third-div to be displayed and #second-div to be hidden. My problem is: a single scroll down on the touchpad might trigger multiple events thus showing the #second-div and #third-div immediately.

$(body).on('DOMMouseScroll mousewheel', function (event) {
                                if (event.originalEvent.detail > 0 || event.originalEvent.wheelDelta < 0) {
                                    //scroll down
                                    console.log('Down');
                                } else {
                                    //scroll up
                                    console.log('Up');
                                }
                                //prevent page fom scrolling
                                return false;
                            });

How Can I detect the scroll down event, stop the scroll event and show #second-div. Then detect another scroll down event, stop the scroll event and hide #second-div and show #third-div?

Also, Afterwards, I detect the scroll up event, stop the scroll event and hide #third-div and show #second-div. Then detect another scroll up event, stop the scroll event and hide #second-div?

Thank you.

Have you tried [fullPage.js](http://alvarotrigo.com/fullPage/) library? — Alvaro, Jun 01 '15 at 10:02

score 0 · Answer 1 · edited May 23 '17 at 11:51

This snippet uses the scroll method of JQuery (there's a similar question: Differentiate between scroll up/down in jquery?)

$(window).scroll(function(e) {
  var target = e.currentTarget,
    $self = $(target),
    scrollTop = window.pageYOffset || target.scrollTop,
    lastScrollTop = $self.data("lastScrollTop") || 0,
    scrollHeight = target.scrollHeight || document.body.scrollHeight,
    scrollText = "";

  if (scrollTop > lastScrollTop) {
    scrollText = "<b>scroll down</b>";
  } else {
    scrollText = "<b>scroll up</b>";
  }

  $(".test").html(scrollText +
    "<br>innerHeight: " + $self.innerHeight() +
    "<br>scrollHeight: " + scrollHeight +
    "<br>scrollTop: " + scrollTop +
    "<br>lastScrollTop: " + lastScrollTop +
    "<br>" + scrollText);

  if (scrollHeight - scrollTop === $self.innerHeight()) {
    console.log("► End of " + scrollText);
  }

  //saves the current scrollTop
  $self.data("lastScrollTop", scrollTop);
});

#first-div {
  height: 100%;
}
#second-div,
#third-div {
  display: none;
}
.test {
  margin: 200px auto 200px auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="first-div">
  <div class="test">
    scroll info</div>
</div>
<div id="second-div">
  <div class="test"></div>
</div>
<div id="third-div">
  <div class="test"></div>
</div>

Hi, I don't understand how can I use this to solve my problem. A single touch pad scroll down event will make this code run multiple times if (scrollTop > lastScrollTop) { scrollText = "scroll down"; } else { scrollText = "scroll up"; } .... thus showing my second and third div simultaneously... when a scroll down event occur, I want to first shown #second-div and when a new scroll event is generated show third-div.... with the current code I don't seem to able to understand how to limit the scroll down to showing one div instead of two... — perpetual_dream, May 30 '15 at 13:43

score 0 · Answer 2 · answered Jun 01 '15 at 10:01

I would encourage you to use fullPage.js to save time and have a much better result. Do not reinvent the wheel.

It is currently the most used plugin for this kind of sites. Works in modern and old browsers, touch devices and has a good respond to kinetic scrolling in Apple laptops. It deals with URL hashes, returning links (anchor links), resizing...

Plenty of configurable options, methods and callbacks.

Highly tested in different devices and browsers by thousands of persons (Windows Phone, Adroid, iOS, touch screen computers, Opera, Safari...)
Compatibility with touch devices.
Compatibility with kinetic scrolling (Apple laptops, magic mouse...).
Compatibility with old browsers (IE 8, Opera 12...).
Good performance for modern browsers and touch devices (css3).
Recalculate of sections and slides when resizing the viewport.
Returning anchors in the URL.
Responsive mode.
Accessibility features (keyboard, scroll bar, browser history).
Use of callbacks to fire actions.
Plenty of methods and options.

And you get all of that for just 7Kb gzipped if you use fullPage.js.

Show div on scroll down effect in a page that occupies full height

2 Answers2