자바스크립트 Sticky 기능 구현 예제 [Javascript & jQuery]

자바스크립트 (JavaScript)

 

See the Pen Sticky 기능(자바스크립트) 자체 커스텀 코드 by kimyangsun (@kimyangsun) on CodePen.

 

자바스크립트 Sticky 기능 구현 예제 [Javascript & jQuery] 코드펜 소스코드 입니다.

해당 기능을 구현할때 다른 쉬운 코드들이 있을수도 있겠지만 저 나름대로 최대한 간단하게 짜본 코드입니다.

변수로 지정된 요소들과 if 문을 잘 살펴보시면 이해하기 편하실거에요 :)

 

$(window).on('scroll', function(){
  const PADDING = 20; // 스티키 박스가 고정될 때 위아래 간격

  let scrollTop = $(this).scrollTop();
  //console.log('윈도우의 scrollTop : ' + scrollTop);

  let breakOffsetTop = $('.break-anchor').offset().top;
  //console.log('브레이크 앵커의 offsetTop : ' + breakOffsetTop);

  let stickyWrapOffsetTop = $('.sticky-wrap').offset().top;
  //console.log('스티키 외부의 offsetTop : ' + stickyWrapOffsetTop);

  let stickyBoxOffsetTop = $('.sticky-box').height();
  //console.log('스티키 박스의 높이 : ' + stickyBoxOffsetTop);

  if ( (scrollTop + stickyBoxOffsetTop) > (breakOffsetTop - PADDING) ) {
    $('.sticky-box').css('top', (scrollTop + stickyBoxOffsetTop - breakOffsetTop + PADDING ) * -1)
  }
  else if ( scrollTop > stickyWrapOffsetTop - PADDING ) {
    $('.sticky-box').addClass('sticky').css('top', PADDING);
  }
  else {
    $('.sticky-box').removeClass('sticky');
  }
});