0

I am trying to move fixed divs (each .container_fluid) into view based on the current div in view and on scroll direction. I am using javascript and jquery. For the most part it works when going in one direction (from start to end or end to start), but if I change directions on the mouse/trackpad, the scroll goes in the wrong direction for one scroll event before going in the intended direction in the next scroll event (if that makes sense).

For example, if you go down-down-up-up, it moves as if you went down-down-down-up I think it may be an error in how I've used the boolean states, but I'm not sure how to fix it.

The down scroll should bring the next div into view, and the up scroll should bring the previous div into view. Also, if you scroll back-to-back too quickly, the divs do not move for a while (how can I fix that? I have a debounce function set at 100ms).

jsfiddle here

<div class="container-fluid" id="home">
  <h1>HOME</h1>
</div>

<div class="container-fluid" id="typetester_patternmaker">
  <div class="row">
    <div class="col-6" id="typetester">
      <h2>TYPE TESTER</h2>
      <p>(ttpm_on = 1)</p>
      </div>
    <div class="col-6" id="patternmaker">
      <h2>PATTERN MAKER</h2>
    </div>
  </div>
</div>

<div class="container-fluid" id="structure_precedents">
  <div class="row">
    <div class="col-6" id="structure" autofocus>
      <h2>LETTERFORM STRUCTURE</h2>
      <p>(ttpm_on & sp_on = 1)</p>
    </div>
    <div class="col-6" id="precedents">
      <h2>PRECEDENTS</h2>
    </div>
  </div>
</div>

<div class="container-fluid" id="download_colophon">
  <div class="row">
    <div class="col-6" id="download">
      <h2>DOWNLOAD</h2>
      <p>(ttpm_on, sp_on, & dc_on = 1)</p>
    </div>
    <div class="col-6" id="colophon">
      <h2>COLOPHON</h2>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="js/nav.js"></script>


$(document).ready(function() {

// mouse structure & nav
var ttpm_on = 0,
  sp_on = 0,
  dc_on = 0,
  menu_on = 0;
var startScroll = $(document).height() / 2;
var lastScrollTop = startScroll;

function debounce(func, wait, immediate) {
  var timeout;
  return function() {
    var context = this,
      args = arguments;
    var later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
}

  // these four functions are to navigate to their div
function ttpm() {
  ttpm_on = 1; // ttpm_on = 1 means the #typetester_patternmaker div is in view (i.e. div is positioned with top = 0)
  sp_on = 0;
  dc_on = 0;
  $("#typetester_patternmaker").animate({
    top: '0vh',
  }, 1000, function() {});
  $("#structure_precedents").animate({
    top: '100vh',
  }, 1000, function() {});
  $("#download_colophon").animate({
    top: '100vh',
  }, 1000, function() {});
}
$("#typetester_patternmaker, #typetester_patternmaker_button").click(function() {ttpm()} );

function sp() {
  ttpm_on = 1;
  sp_on = 1;
  dc_on = 0;
  $("#structure_precedents").animate({
    top: '0vh',
  }, 1000, function() {});
  $('h2').animate({
    'padding-top': '3vh',
  }, 1000, function() {});
  $("#typetester_patternmaker").animate({
    top: '0vh',
  }, 1000, function() {});
  $("#download_colophon").animate({
    top: '100vh',
  }, 1000, function() {});
}
$("#structure_precedents, #structure_precedents_button").click(function() {sp()} );

function dc() {
  ttpm_on = 1;
  sp_on = 1;
  dc_on = 1;
  $("#download_colophon").animate({
    top: '0vh',
  }, 1000, function() {});
  $('h2').animate({
    'padding-top': '3vh',
  }, 1000, function() {});
  $("#structure_precedents").animate({
    top: '0vh',
  }, 1000, function() {});
  $("#typetester_patternmaker").animate({
    top: '0vh',
  }, 1000, function() {});
}
$("#download_colophon, #download_colophon_button").click(function() {dc()} );

function hb() {
  ttpm_on = 0;
  sp_on = 0;
  dc_on = 0;
  $("#structure_precedents").animate({
    top: '90vh',
  }, 1000, function() {});
  $("#typetester_patternmaker").animate({
    top: '85vh',
  }, 1000, function() {});
  $("#download_colophon").animate({
    top: '95vh',
  }, 1000, function() {});
  $('h2').animate({
    'padding-top': '0.75vh',
  }, 1000, function() {});
}
$("#home_button").click(function() {hb()} );

// scroll nav
var scrollNav = debounce(function() {
  var st = $(window).scrollTop();
  if (ttpm_on == 0) {
    if (st > lastScrollTop) { ttpm(); }
  } 
  else if (ttpm_on == 1 && sp_on == 0) {
    if (st > lastScrollTop) { sp(); } 
    else { hb(); }
  } 
  else if (ttpm_on == 1 && sp_on == 1 && dc_on == 0) {
    if (st > lastScrollTop) { dc(); }
    else { ttpm(); }
  } 
  else if (ttpm_on == 1 && sp_on == 1 && dc_on == 1) {
    if (st <= lastScrollTop) { sp(); }
  }
  lastScrollTop = st;
}, 100, true);

window.onscroll = function() { scrollNav() };
});
vu_uv
  • 41
  • 5

1 Answers1

0

Added a timeout function for retrieving the updated scrollTop() value and made lastScrollTop equal to scrollTop() instead of st:

var scrollNav = debounce(function(){
  var st = window.pageYOffset || document.documentElement.scrollTop;
  if (st > lastScrollTop) {
    if (ttpm_on == 0) { ttpm(); }
    else if (ttpm_on == 1 && sp_on == 0) { sp(); }
    else if (ttpm_on == 1 && sp_on ==1 && dc_on == 0) { dc(); }
  }
  else {
    if (ttpm_on == 1 && sp_on == 0) { hb(); }
    else if (ttpm_on ==1 && sp_on == 1 && dc_on == 0) { ttpm(); }
    else if (ttpm_on ==1 && sp_on == 1 && dc_on == 1) { sp(); }
  }
  setTimeout(function(){
    lastScrollTop = $(window).scrollTop();
  }, 750)
}, 75, true);

The timeout is needed since my divs have timed transitions of 750ms… figured it out after finally finding these posts: https://stackoverflow.com/a/47372932/11325012 & https://stackoverflow.com/a/37499427/11325012. Still not 100% fool-proof but it goes in the right direction now.

vu_uv
  • 41
  • 5