javascript - Show div on scroll down effect in a page that occupies full height -
i have 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 first scroll down event need #second-div displayed, if second scroll down event detected, need #third-div displayed , #second-div hidden. problem is: single scroll down on touchpad might trigger multiple events showing #second-div , #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 console.log('up'); } //prevent page fom scrolling return false; }); how can detect scroll down event, stop scroll event , show #second-div. detect scroll down event, stop scroll event , hide #second-div , show #third-div?
also, afterwards, detect scroll event, stop scroll event , hide #third-div , show #second-div. detect scroll event, stop scroll event , hide #second-div?
thank you.
this snippet uses scroll method of jquery (there's 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 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>
Comments
Post a Comment