There is a task such that when the scroll changes the screen. It works only once. What do you need to add, that would always work?
$('#myContainer').bind('mousewheel', function(e){ var sec_1 = $(".section"); if(e.originalEvent.wheelDelta / 120 > 0) { sec_1.prev().addClass("main__current").removeClass("main__previous main__previous") sec_1.next().filter(':first').removeClass("main__current").addClass("main__next") } else { if(sec_1.hasClass("main__current" )) { sec_1.prev().removeClass("main__current").addClass("main__previous") sec_1.next().filter(':first').addClass("main__current").removeClass("main__next main__previous") } else { console.log(false) } } }); body { overflow: hidden } .main__section { position: absolute; left: 0; width: 100vw; height: 100vh; -webkit-transition: top .3s linear; transition: top .3s linear; } .main__previous { top: -100%; } .main__current { z-index: 1; top: 0; } .main__next { top: 100%; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="myContainer"> <div class="section section_1 main__section main__current"> 1 </div> <div class="section section_2 main__section main__next"> 2 </div> <div class="section section_3 main__section main__next"> 3 </div> </div> 
