고정헤더 ,스크롤을 내리면 헤더 사라지고 올리면 헤더 나타나고, 채택완료
기본값 .nav-down {배경:투명}
.nav-no {display: none;} 스크롤 내리면 헤더사라짐
.nav-up {background-color: #000000;} 스크롤 올리면 헤더 배경 검정색
문제는.....
스크롤을 내렸다가 , 가장 위로 스크롤을 올리면 배경이 검정값으로 되어있습니다.
가장 위로 스크롤을 다시 올릴때 처음 .nav-down 초기 값으로 하고 싶습니다 ㅠㅠ
혹시 다른 참고할 만한 자료가 있다면 링크걸어주시면 감사합니다.
</strong></p>
<p> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script></p>
<p> <script src="../dist/scroll-up-bar.min.js"></script></p>
<p> </p>
<p> </p>
<p> <script></p>
<p>/// Hide Header on on scroll down</p>
<p>var didScroll;</p>
<p>var lastScrollTop = 0;</p>
<p>var delta = 5; // 동작의 구현이 시작되는 위치</p>
<p>var navbarHeight = $('header').outerHeight(); // 영향을 받을 요소를 선택</p>
<p> </p>
<p>// 스크롤시에 사용자가 스크롤했다는 것을 알림</p>
<p>$(window).scroll(function(event){</p>
<p> didScroll = true;</p>
<p>});</p>
<p> </p>
<p>// hasScrolled()를 실행하고 didScroll 상태를 재설정</p>
<p>setInterval(function() {</p>
<p> if (didScroll) {</p>
<p> hasScrolled();</p>
<p> didScroll = false;</p>
<p> }</p>
<p>}, 250);</p>
<p> </p>
<p>// 동작을 구현</p>
<p>function hasScrolled() {</p>
<p> // 접근하기 쉽게 현재 스크롤의 위치를 저장한다.</p>
<p> var st = $(this).scrollTop();</p>
<p> </p>
<p> // 설정한 delta 값보다 더 스크롤되었는지를 확인한다.</p>
<p> if(Math.abs(lastScrollTop - st) <= delta){</p>
<p> return;</p>
<p> }</p>
<p> </p>
<p> // 헤더의 높이보다 더 스크롤되었는지 확인하고 스크롤의 방향이 위인지 아래인지를 확인한다.</p>
<p> if (st > lastScrollTop && st > navbarHeight){</p>
<p> // Scroll Down</p>
<p> $('header').removeClass('nav-down').addClass('nav-no');</p>
<p> } else {</p>
<p> // Scroll Up</p>
<p> if(st + $(window).height() < $(document).height()) {</p>
<p> $('header').removeClass('nav-no').addClass('nav-up');</p>
<p> }</p>
<p> }</p>
<p> </p>
<p> // lastScrollTop 에 현재 스크롤위치를 지정한다.</p>
<p> lastScrollTop = st;</p>
<p>}</p>
<p>
</p>
<p> </script></p>
<p> </p>
<p><strong>
답변 3개
요거는 다른 스크립트를 이용하여 해결하였습니다.
우선 초보자에게는 , ^^;;; 이 방법이 더 쉬운것같아, 소스 공유합니다.
우선 홈페이지 메인 이미지가 헤더 영역을 모두 덮어버리려고요 헤더를 고정헤더로 만들었습니다.
스크롤을 내리면, 헤더 영역이 흰색 배경과 글자 컬러가 바뀌게 하고 싶었습니다.
그누보드 head.php파일 수정
</strong></p>
<p> </p>
<p> <script type="text/javascript" src="<a href="http://code.jquery.com/jquery-2.2.4.min.js"></script>" target="_blank" rel="noopener noreferrer">http://code.jquery.com/jquery-2.2.4.min.js"></script></a></p>
<p> <script></p>
<p> </p>
<p>// 스크롤 높이에 따른</p>
<p> </p>
<p>$(window).scroll( function() {</p>
<p> var scrollTop = $(window).scrollTop();</p>
<p> if (scrollTop > 0){</p>
<p> $("<span style="color:#e74c3c;">#hd,#nav</span>").addClass("fix");</p>
<p> } else {</p>
<p> $("<span style="color:#e74c3c;">#hd,#nav</span>").removeClass("fix");</p>
<p> }</p>
<p>});</p>
<p> </script></p>
<p> </p>
<p> </p>
<p><strong>
변경해야될 곳 hd , nav부분
스크롤 내리면 해당 영역에 fix클래스 생김
그누보드 head.php 원본
클래스를 더 추가하고 싶으면, 이부분에 추가
$("#hd,#nav,.acb,.main")
스타일 시트
#hd.main {background: none;} 투명으로
#hd.fix {background: #fff;} 스크롤내리면 fix생기면서 배경흰색으로 변경
nav메뉴 흰색으로 설정된 것, fix 클래스 생기면서 검정으로 변경
#hd_wrapper #nav.fix [class*="gnb_1dli"] > a {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
padding: 0 70px;
height: 100%;
color: #000000;
font-size: 1.1rem;
}
댓글을 작성하려면 로그인이 필요합니다.
사용 중인 같은 기능
</p>
<p><script type="text/javascript" charset="utf-8">
$(function () {
let scrolltop_before = 0;
let scrolltop_after = 0;
function fn_evt_scroll(e) {</p>
<p> scrolltop_after = document.documentElement.scrollTop;</p>
<p> if (scrolltop_before > scrolltop_after) {
$('#gnb').css({
"position": "fixed",
"top": "0",
"display": "block",
"width": "100%",
"z-index" : "10000"
});
$('#wrapper').css({
"padding-top":"20px"
});
} else {
$('#gnb').css({
"display": "block",
"position": "relative",
"z-index" : "10000"
});
$('#wrapper').css({
"padding-top":"20px"
});
}
if (scrolltop_after < 1) {
$('#gnb').css({
"display": "block",
"position": "relative",
"z-index" : "10000"
});
}
scrolltop_before = document.documentElement.scrollTop;
}</p>
<p> $(window).on("scroll", fn_evt_scroll);
});</p>
<p>$(function(){
var nava = $('#gnb,#tnb'); //헤더를 변수에 넣기
var page = $('#container'); //색상이 변할 부분
var pageOffsetTop = page.offset().top; //색상 변할 부분의 top값 구하기
$(window).resize(function(){ //반응형을 대비하여 리사이즈시 top값을 다시 계산
pageOffsetTop = page.offset().top;
});
$(window).on('scroll', function(){
if($(window).scrollTop() > 30){ //($(window).scrollTop() >= pageOffsetTop) { // 스크롤이 page보다 밑에 내려가면
nava.addClass('down'); //클래스 추가
} else { // 스크롤 올릴 때
nava.removeClass('down'); //클래스 제거
}
});
});</p>
<p></script>답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인