CODEWITHSUNDEEP
jqueryhtml
MPortman
MPortman

Reputation: 181

Close slider when scrolling to top before timeout classes start

Having this issue with this slider. This scroll script works fine when im scrolling slowly. The idea is when the active == 1 (it's checking for a variable in local storage) the slider pops out after 3 seconds. And this works all fine when going slow. Scroll down slowly...it pops up. Scroll back up slowly...it goes away.

The problem is the setTimeout. If I scroll very fast up and down and bring it to the top it adds the class 'isActive' after the timeout because it went 'down' then back 'up' really quick. So you could be scrolling very fast, go to the top, and the slider will pop up after 3100.

Trying to figure out a way to prevent the timeout from firing at all once you get to the point up top. 

var tabElement = $('.c-risk-survey-slideout');
var active = 0;


$(window).scroll(function() {
  var cookie1 = getCookie("cookie1");
  var cookie2 = getCookie("cookie2");
  if ($(window).scrollTop() > $('html').height() / 9) {


    if (cookie1 !== null && cookie2 !== null) {

      if (screen.width > 767) {
        setTimeout(function() {
          if (localStorage.getItem('Survey') == null) {
            tabElement.addClass('isActive');

          }

          if (active == 1) {

            tabElement.addClass('tab-open');
            tabElement.removeClass('animated');
            active = 0;
            setTimeout(function() {
              tabElement.removeClass('tab-open');
              tabElement.addClass('animated');
            }, 3000);
          }
        }, 3100);
      }

    }

  }

  if ($(window).scrollTop() < $('html').height() / 9) {
    tabElement.removeClass('isActive');

  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="c-risk-survey-slideout d-flex animated bounce">
  <div class="c-risk-survey-slideout__tab d-flex justify-content-center align-items-center"><i class="c-risk-survey-slideout__caret far fa-angle-left"></i></div>
  <div class="c-risk-survey-slideout__main d-flex justify-content-center align-items-center flex-column u-px-8">
    <h3 class="c-risk-survey-slideout__title text-center font-weight-bold text-white u-my-0 u-mb-3">Where are your security gaps?</h3>
    <button class="btn btn--purple c-risk-survey-slideout__cta u-mt-3 irs-survey-start">Take the identity quiz</button>
  </div>
</div>

Upvotes: 0

Views: 111

Answers (1)

Huangism
Huangism

Reputation: 16438

I cannot test this code because your given code did not include enough to run it but conceptually i believe this is what you need

var tabElement = $('.c-risk-survey-slideout');
var active = 0;

// declare your timers
var showTimer = null;
var closeTimer = null;

$(window).scroll(function() {
  var cookie1 = getCookie("cookie1");
  var cookie2 = getCookie("cookie2");

  if ($(window).scrollTop() > $('html').height() / 9) {
    // only setup timer if no timer already exist, you don't want to trigger it multiple times
    if (cookie1 && cookie2 && screen.width > 767 && !showTimer) {
      // assign timer for opening
      showTimer = setTimeout(function() {
        if (localStorage.getItem('Survey') == null) {
          tabElement.addClass('isActive');
        }

        if (active == 1) {
          tabElement.addClass('tab-open');
          tabElement.removeClass('animated');
          active = 0;
        
          // assign timer for closing
          closeTimer = setTimeout(function() {
            tabElement.removeClass('tab-open');
            tabElement.addClass('animated');
          }, 3000);
        }
      }, 3100);

    }
  } else {
    // condition no longer is met so we clear your timers so they no longer trigger
    clearTimeout(showTimer);
    clearTimeout(closeTimer);
    showTimer = null;
    closeTimer = null;
    tabElement.removeClass('isActive');
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="c-risk-survey-slideout d-flex animated bounce">
  <div class="c-risk-survey-slideout__tab d-flex justify-content-center align-items-center"><i class="c-risk-survey-slideout__caret far fa-angle-left"></i></div>
  <div class="c-risk-survey-slideout__main d-flex justify-content-center align-items-center flex-column u-px-8">
    <h3 class="c-risk-survey-slideout__title text-center font-weight-bold text-white u-my-0 u-mb-3">Where are your security gaps?</h3>
    <button class="btn btn--purple c-risk-survey-slideout__cta u-mt-3 irs-survey-start">Take the identity quiz</button>
  </div>
</div>

Upvotes: 1

Related Questions