특정 영역 도달 시 fixed 됐다가 영역이 끝날 때 remove할 수 있을까요?
본문
$(document).ready(function(){
const content = document.querySelector('#sod_frm_orderer');
const sit_buy = document.querySelector('#sit_buy');
const footer = document.querySelector('#ft');
// 컨텐츠 영역부터 브라우저 최상단까지의 길이 구하기
const contentTop = content.getBoundingClientRect().top + window.scrollY;
window.addEventListener('scroll', function(){
if(window.scrollY >= contentTop){
sit_buy.classList.add('fixed');
}else{
sit_buy.classList.remove('fixed');
}
console.log(window.scrollY,contentTop);
});
})
영카트 제품 상세페이지에 있는 #sit_buy를 상세페이지가 나올 경우 클래스를 추가하고 상세페이지 top에서 벗어나면 remove를 하게 만들었습니다.
그런데 상세페이지가 끝났음에도 불구하고 푸터때문에 스크롤이 있어 푸터와 겹쳐지는 현상이 생기는데 상세페이지가 끝났을 때도 리무브를 시킬 방법이 있을까요?
상세페이지 하단의 값을 구하는 방법이 궁금합니다.
답변 1
$(document).ready(function(){
const content = document.querySelector('#sod_frm_orderer');
const sit_buy = document.querySelector('#sit_buy');
const footer = document.querySelector('#ft');
// sit_buy의 높이 구함 (fixed일 경우 하단 겹침 방지용)
const sitBuyHeight = sit_buy.offsetHeight;
const contentTop = content.getBoundingClientRect().top + window.scrollY;
const footerTop = footer.getBoundingClientRect().top + window.scrollY;
window.addEventListener('scroll', function(){
const scrollY = window.scrollY;
const limit = footerTop - sitBuyHeight - 20; // footer에 닿기 전 여유 주기
if (scrollY >= contentTop && scrollY < limit) {
sit_buy.classList.add('fixed');
} else {
sit_buy.classList.remove('fixed');
}
});
});
이렇게 한번 해보세요
감사합니다!
답변을 작성하시기 전에 로그인 해주세요.