제이쿼리 질문좀 드리겠습니다.
본문
안녕하세요 계속 질문만드려 죄송합니다. ㅠㅠ
위사이트 헤더 부분 처럼 만들고 있는중 입니다.
스크롤 내렸다가 올릴시 보이다 안보이게끔은 찾앗는데
문제는 처음딱 들어갈때 투명으로 나왔다가 스크롤 내릴때 하얀색으로 나오는건 어떻게 검색을 해야하는지 모르겠습니다.
방법을 아시거나 명칭좀 알려주시면 감사하겠습니다.
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); }
#site-header.hide { top: -53px; }
Javascript Code
(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/ < 스크롤 보였다 안보였다 소스
답변 3
처음에는 그 부분의
background-color를 transparent로 설정하고
스크롤 될 때 그 부분의
background-color를 white로 설정하시면 될 듯 싶습니다.
죄송하지만 어디부분에 추가를 해야할까요~?
스크롤 체크해서 상단 메뉴 보이고 안보이는데 굳이 저 스크립트를 따라 써야되나요?
$(window).scroll(function(){
var scrollTop = $(this).scrollTop();
});
스크롤 반응있으면 위 함수타고 scrollTop변수에 담기는 값을 체크해서 하는게 훨씬 쉬우실거같은데요??
소스를 긁어다 하지마시고 직접짜보면서 하는게 더 도움될겁니다
답변을 작성하시기 전에 로그인 해주세요.
