제이쿼리 질문좀 드리겠습니다.

minsin

프로필 보기 작성한 질문 작성한 답변 전체 작성글 보기 전체 댓글 보기

2021-09-09 (목) 13:49:13 4,553

안녕하세요 계속 질문만드려 죄송합니다. ㅠㅠ

https://www.rolex.com/ko

위사이트 헤더 부분 처럼 만들고 있는중 입니다.

스크롤 내렸다가 올릴시 보이다 안보이게끔은 찾앗는데

문제는 처음딱 들어갈때 투명으로 나왔다가 스크롤 내릴때 하얀색으로 나오는건 어떻게 검색을 해야하는지 모르겠습니다.

방법을 아시거나 명칭좀 알려주시면 감사하겠습니다.

css

Copy

#site-header { position: fixed; height: 52px; background: #fff; top: 0; width: 100%; z-index: 100; transition: all .3s ease; box-shadow: 0 1px 25px rgba(0,0,0, .1); }

#site-header.hide { top: -53px; }

Javascript Code

Copy

(function(){ var doc = document.documentElement; var w = window; var prevScroll = w.scrollY || doc.scrollTop; var curScroll; var direction = 0; var prevDirection = 0; var header = document.getElementById('site-header'); var checkScroll = function() { /* ** Find the direction of scroll ** 0 - initial, 1 - up, 2 - down */ curScroll = w.scrollY || doc.scrollTop; if (curScroll > prevScroll) { //scrolled up direction = 2; } else if (curScroll < prevScroll) { //scrolled down direction = 1; } if (direction !== prevDirection) { toggleHeader(direction, curScroll); } prevScroll = curScroll; }; var toggleHeader = function(direction, curScroll) { if (direction === 2 && curScroll > 52) { //replace 52 with the height of your header in px header.classList.add('hide'); prevDirection = direction; } else if (direction === 1) { header.classList.remove('hide'); prevDirection = direction; } }; window.addEventListener('scroll', checkScroll); })();

https://codingreflections.com/hide-header-on-scroll-down/ < 스크롤 보였다 안보였다 소스

그누보드5 영카트5 제이쿼리