제이쿼리 질문좀 드리겠습니다. 채택완료
minsin
4년 전
조회 4,255
안녕하세요 계속 질문만드려 죄송합니다. ㅠㅠ
위사이트 헤더 부분 처럼 만들고 있는중 입니다.
스크롤 내렸다가 올릴시 보이다 안보이게끔은 찾앗는데
문제는 처음딱 들어갈때 투명으로 나왔다가 스크롤 내릴때 하얀색으로 나오는건 어떻게 검색을 해야하는지 모르겠습니다.
방법을 아시거나 명칭좀 알려주시면 감사하겠습니다.
css
#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); }</p>
<p>#site-header.hide { top: -53px; }</p>
<p>
Javascript Code
</p>
<p> </p>
<p>(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); })();</p>
<p> </p>
<p>https://codingreflections.com/hide-header-on-scroll-down/ < 스크롤 보였다 안보였다 소스
댓글을 작성하려면 로그인이 필요합니다.
답변 3개
답변을 작성하려면 로그인이 필요합니다.
로그인