모바일 스크롤시 헤더 업/다운 + 최상단시 배경 투명
본문
안녕하세요. 온라인 쇼핑몰운영중입니다.
이번 모바일 메인화면 헤더 영역을 스크롤시 업/다운 하게 설정했습니다.
추가로 최상단에 있을때 배경을 투명으로 하고싶은데 js 어느부분을 수정하면 될지 궁금해 문의 남김니다.
레퍼런스 사이트 https://www.alloso.co.kr/
자사 구축중인 사이트 http://m.andersen2020.cafe24.com/
js 참고사이트 https://webdir.tistory.com/481
//헤더 스크롤감지 업다운
var didScroll; // 스크롤시에 사용자가 스크롤했다는 것을 알림
var lastScrollTop = 0;
var delta = 0; // 동작의 구현이 시작되는 위치
var navbarHeight = $('.top_section').outerHeight();// 영향을 받을 요소를 선택
$(window).scroll(function(event){
didScroll = true;
});
// hasScrolled()를 실행하고 didScroll 상태를 재설정
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = $(this).scrollTop();
// Make sure they scroll more than delta
if(Math.abs(lastScrollTop - st) <= delta)
return;
// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop && st > navbarHeight){
$('.top_section').removeClass('nav-down').addClass('nav-up');
} else {
// Scroll Up
if(st + $(window).height() < $(document).height()) {
$('.top_section').removeClass('nav-up').addClass('nav-down');
}
}
lastScrollTop = st;
}
//헤더 스크롤감지 업다운 끝
답변 1
개발자도구를 이용해서 최상단에 있을때 class를 찾아서 해당 클래스에 css를 넣어주시면됩니다
nav-down 클래스에 흰색 벼경을 넣었는데 최상단시 안없어지고 남아 있더라고요 ㅠ
