Trigger .scroll function inside another .scroll function (endless looping page)

Question

I have managed to create a seamless looping page similar to this: Continuous Looping Page (Not Infinite Scroll)

But instead of looping from end of page to top of page, I am looping within two div ID's, question referenced here:Endless looping page

And the loop solved with this: https://codepen.io/akmalmo/pen/YzNggJR

 var loopend = $('#loop-end').offset().top;
 var loopstart = $('#loop-start').offset().top;

$(document).scroll(function() {
    if ( $(document).scrollTop() >= loopend ) {
    $(document).scrollTop($('#loop-start').offset().top)
    }
  else if ( $(document).scrollTop() <= loopstart ) {
    $(document).scrollTop($('#loop-end').offset().top)
    }
});

Now to the problems! What I am trying to achieve is calling this function after I have scrolled to #loop-start, and not make it go straight down to the loop (I have some whitespace above the images which I wish to keep on page load). And I have tried this here: https://codepen.io/akmalmo/pen/QWdPmER - But this makes the loop stop working in one direction. You can still loop backwards but it gets stuck in the forward direction. What am I missing? Also not working on window resize but that I guess is another question.

var element_position = $('#loop-init').offset().top;

$(document).on('scroll', function() {
    var y_scroll_pos = window.pageYOffset;
    var scroll_pos_test = element_position;

    if(y_scroll_pos > scroll_pos_test) {


 var loopend = $('#loop-end').offset().top;
 var loopstart = $('#loop-start').offset().top;

$(document).scroll(function() {
    if ( $(document).scrollTop() >= loopend ) {
    $(document).scrollTop($('#loop-start').offset().top)
    }
  else if ( $(document).scrollTop() <= loopstart ) {
    $(document).scrollTop($('#loop-end').offset().top)
    }
    
});
         }
});

I almost have it working by adding some px values to the different states. If them having the same position might be the issue. And it sort of works, but it's glitchy and unpredictable: https://codepen.io/akmalmo/pen/eYgoQKd

Is there a simpler way of doing the above? Also, is there a better way of calculating offset that is responsive and doesn't break on window resize?

Answer 1

let prev_pos = $(document).scrollTop();
let loopstart_reached = false;
const loopend = $('#loop-end').offset().top;
const loopstart = $('#loop-start').offset().top;

$(document).on('scroll', function() {
  // if we scrolled past the loopstart element then we can iterate through
  if(loopstart_reached){
    // the current Y position is less or equal to the previous position, this means we are scrolling upwards
    if(prev_pos <= $(document).scrollTop()){
      if ( $(document).scrollTop() >= loopend ) {
        $(document).scrollTop($('#loop-start').offset().top)
      }
    }
    // else we are scrolling downwards
    else{
      if ( $(document).scrollTop() <= loopstart ) {
        $(document).scrollTop($('#loop-end').offset().top)
      }
    }
  }
  
  // store the new Y scroll pos
  prev_pos = $(document).scrollTop();
  
  // check if we reached the loopstart position
  if(prev_pos >= loopstart){
    loopstart_reached = true;
  }
});

That would be my solution, just watch if we are scrolling down or up and we arrive to the desired elements then scroll to the other one.