자바스크립트 따라다니는 퀵메뉴 기능 [JavaScript & jQuery]

자바스크립트 (JavaScript)

 

See the Pen 자바스크립트 따라다니는 우측 메뉴 [JavaScript & jQuery] by kimyangsun (@kimyangsun) on CodePen.

 

자바스크립트 따라다니는 우측 메뉴 [JavaScript & jQuery] 코드펜 소스코드 예제입니다. 

이전에 올린 sticky와 약간 비슷한 느낌인데 그건 positon 을 fix로 해주다가 특정 영역 넘어가면 absolute로 

바꿔주면서 top 값을 바꿔주는 형태로 고정시켰는데

이건 animate 를 이용해 애니메이션을 넣어주면서 따라다니는 효과를 줘야하기에 스크립트를 다르게 적용해주었습니다.

이거도 자바스크립트 코드 자체가 어려운 느낌은 아니어서 아래 코드를 보시면 이해하실 수 있을거에요 :)

 

console.clear();
let box = $('.con')
let boxHeight = box.height();
let boxOffsetTop = box.offset().top;
let quickMenu = $('.fly');
let quickMenuHeight = quickMenu.height();
const DURATION = 1000;

$(window).resize(function(){
    boxHeight = box.height();
    boxOffsetTop = box.offset().top;
    quickMenuHeight = quickMenu.height();
    // console.log('resize!');
})

$(window).scroll(function() {
    let scrollTop = $(this).scrollTop();
    let point;
    let endPoint = boxHeight - quickMenuHeight;
    if ( scrollTop < boxOffsetTop ) {
        point = 0;
    } else if ( scrollTop > endPoint ) {
        point = endPoint;
    } else {
        point = scrollTop - boxOffsetTop; // 따라다니는 영역에서 우측 최상단에 위치
    }
    quickMenu.stop().animate({top: point}, DURATION);
});