날짜 : 2017. 9. 4(월)

목표 : jQuery를 이용하여 sticky(spy, floating) 구현하기

sticky란 사용자 편의를 위하여 스크롤시 일부UI가 사라져 보이는 것을 말한다.
sticky는 스크롤을 내릴시 header 부분이 사라지고 스크롤을 올리면 나타나는 명세를 가진다.

확인내용

1. 내부객체 및 전역객체 사용은 바로 가능하다.

  if(Math.abs(lastHeight-currentHeight) <= delta) {...}
  setInterval(function(e){...}, 500);

- Math 객체는 내장객체 이여서 별도의 선언 없이 사용이 가능하다.
- setInterval함수는 window객체의 함수이여서 별도의 선언이 없으며, window생략이 가능하다.

2. 해당기능의 핵심은 브라우저 이벤트를 실행하는 것이다.

    $(window).scroll(function(e){
      didScroll = true;
    })

- jQuery에서 지원하는 브라우저 이벤트는 3개가 있다. (error, resize, scroll)
- 위 코드는 이벤트가 실행될때마다 함수를 실행하면 많이 실행되기에 setInterval을 500으로 두고서 사용을 하는 내용이다.

3. 스크롤을 아래로 내리는지, 위로 올리는지는 height값을 기준으로 판별한다.

  if(currentHeight > lastHeight){
      $('header').removeClass('nav-down').addClass('nav-up');
  }else{
      $('header').removeClass('nav-up').addClass('nav-down');
  }
   lastHeight = currentHeight;

- 현재 화면의 높이값과 이전 화면의 높이값을 비교하여 스크롤 행동을 판다.
- css클래스는 header의 ‘top’값을 변경하는 내용 이다.

참고사이트

WEBCLUB 블로그

달걀한개의 개발일지

jQuery를 이용한 sticky구현하기