Bug on fullscreen scrolling website

Question

Bug on fullscreen scrolling website

Navigation

#1 by (0 votes)

1

I'm trying to do a fullscreen scrolling website. That is, I do not want the scroll to stop in the middle of a section but to identify if it comes from below or from above and make an animation to the top of the respective section. I have the following code however, it looks like the scrollTop conflicts with the page scroll and I can not get out of section 1.

var lastScrollTop = 0;
$(window).on('scroll', function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       $('html, body').stop().animate({
       		scrollTop: $('section').eq(1).offset().top
       }, 100);
   } else {
   		$('html, body').stop().animate({
       		scrollTop: $('section').eq(0).offset().top
       }, 100);
   }
   lastScrollTop = st;
});

section {
  height: 600px;
}
.red {
  background-color: red;
}
.blue {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><sectionclass="red">
  
</section>
<section class="blue">
  
</section>

javascript html jquery

asked by anonymous 31.01.2018 / 15:49

1 answer

___ ___ erkimt error in the configuration log4j2.properties ______ qstntxt ___

My error:

%pre%

My log4j2.properties configuration file

%pre%

Statement:

%pre%

Validation:

%pre%

The console part is apparently ok. But no file is created

___ Add a given column by JQuery

score 0 · Accepted Answer

I think the logic of your code storing a value in lastScrollTop is causing conflicts. See, even if you are in section below any scroll you do, the least that is less than the value in lastScrollTop , will scroll scroll for the first section , which should not occur, by the content of the question.

You can use the Scrollify plugin that already has this effect:

$.scrollify({
   section : ".blue",
   interstitialSection : ".red",
   easing: "linear",
   scrollSpeed: 500,
   offset : 0,
   scrollbars: true,
   setHeights: true,
   overflowScroll: true,
   updateHash: false,
   touchScroll:true
});

section {
  height: 600px;
}
.red {
  background-color: red;
}
.blue {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/scrollify/1.0.19/jquery.scrollify.min.js"></script>
<section class="red">
  
</section>
<section class="blue">
  
</section>