스크롤 방향 판단

 

마우스 스크롤을 내렸을때

퀵메뉴 숨켰다가

 

올리면 다시 나오기 

 

---

스크롤 판단 

 

 

$(function () {
  // 퀵메뉴 스크롤 방향판단
  $(window).on('scroll', function () {
    var prevSt = 0;
    var nextSt = $(this).scrollTop();

    // 아래로스크롤
    console.log(prevSt + '이전스크롤탑', nextSt + '나중스크롤탑');
  });
});

이전스크롤 탑은 계속 0

멈췄을때 나중스크롤탑이 이전스크롤 탑으로 들어가야함 

 

스크롤을 하다가 멈췄을때 이전스크롤이 되므로, 나중스롤탑과 합쳐야한다

 

안되는 이유는

 

 

var prevSt = 0;

스크롤탑 값을 계속 0으로 초기화 하기때문

 

 

그러니 이벤트 밖으로 이동해준다.

 

 

$(function () {
  // 이전 scrolltop 처음만 초기화
  var prevSt = 0;

  // 퀵메뉴 스크롤 방향판단
  $(window)
    .on('scroll', function () {
      var nextSt = $(this).scrollTop();

      // 아래로스크롤
      console.log(prevSt + '이전스크롤탑', nextSt + '나중스크롤탑');
      // 순서변경 금지 이전스크롤을 나중 스크롤에 넣어야하기때문에
      prevSt = nextSt;
    })
    .trigger('scroll');
});

이때 콘솔확인은 

 

 

prevSt = nextSt;

위쪽에서 해줘야한다.

이전스크롤 값이 나온 상태에서 나중 스크롤을 더해줘야하기때문

콘솔보다 위로 갈경우 같은값이나옴

 

---

동작실행

 

그럼 스크롤을 아래로 했을때 숨키고 

올리면 나오게 해보자 

 

숨켜짐

 

보여짐

 

 

$(function () {
  // 이전 scrolltop 처음만 초기화
  var prevSt = 0;

  // 퀵메뉴 스크롤 방향판단
  $(window)
    .on('scroll', function () {
      var nextSt = $(this).scrollTop();

      // 아래로스크롤
      if (prevSt < nextSt) {
        $('#footer .quick').addClass('hide');
      } else {
        $('#footer .quick').removeClass('hide');
      }
      // 콘솔확인 위쪽 순서변경 금지 preSt을 nectSt에 넣어야하기때문
      console.log(prevSt + '이전스크롤탑', nextSt + '나중스크롤탑');
      prevSt = nextSt;
    })
    .trigger('scroll');
});

 

 

 

---

 

함수로 감아주기

 

 

 

0.8초 뒤에 보여주고 함수에 한번 넣어주자!

 

 

스크롤 기능을 껏다 켯다 하는게 토글과 비슷하므로 toggleQuick 이름을 만들어 함수로 지정해보자 

$(function () {
  // 이전 scrolltop 처음만 초기화
  var prevSt = 0;

  $(window)
    .on('scroll', function () {
      toggleQuick();
    })
    .trigger('scroll');

  // 스크롤 방향판단 퀵메뉴 토글
  function toggleQuick() {
    var nextSt = $(this).scrollTop();

    // 아래로스크롤
    if (prevSt < nextSt) {
      $('#footer .quick').addClass('hide');
      // 0.8초 뒤에 보여주기
      setTimeout(function () {
        $('#footer .quick').removeClass('hide');
      }, 800);
    } else {
      $('#footer .quick').removeClass('hide');
    }
    // 콘솔확인 위쪽 순서변경 금지 preSt을 nectSt에 넣어야하기때문
    console.log(prevSt + '이전스크롤탑', nextSt + '나중스크롤탑');
    prevSt = nextSt;
  }
});