고정헤더 ,스크롤을 내리면 헤더 사라지고 올리면 헤더 나타나고,
본문
기본값 .nav-down {배경:투명}
.nav-no {display: none;} 스크롤 내리면 헤더사라짐
.nav-up {background-color: #000000;} 스크롤 올리면 헤더 배경 검정색
문제는.....
스크롤을 내렸다가 , 가장 위로 스크롤을 올리면 배경이 검정값으로 되어있습니다.
가장 위로 스크롤을 다시 올릴때 처음 .nav-down 초기 값으로 하고 싶습니다 ㅠㅠ
혹시 다른 참고할 만한 자료가 있다면 링크걸어주시면 감사합니다.
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="../dist/scroll-up-bar.min.js"></script>
<script>
/// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5; // 동작의 구현이 시작되는 위치
var navbarHeight = $('header').outerHeight(); // 영향을 받을 요소를 선택
// 스크롤시에 사용자가 스크롤했다는 것을 알림
$(window).scroll(function(event){
didScroll = true;
});
// hasScrolled()를 실행하고 didScroll 상태를 재설정
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
// 동작을 구현
function hasScrolled() {
// 접근하기 쉽게 현재 스크롤의 위치를 저장한다.
var st = $(this).scrollTop();
// 설정한 delta 값보다 더 스크롤되었는지를 확인한다.
if(Math.abs(lastScrollTop - st) <= delta){
return;
}
// 헤더의 높이보다 더 스크롤되었는지 확인하고 스크롤의 방향이 위인지 아래인지를 확인한다.
if (st > lastScrollTop && st > navbarHeight){
// Scroll Down
$('header').removeClass('nav-down').addClass('nav-no');
} else {
// Scroll Up
if(st + $(window).height() < $(document).height()) {
$('header').removeClass('nav-no').addClass('nav-up');
}
}
// lastScrollTop 에 현재 스크롤위치를 지정한다.
lastScrollTop = st;
}
</script>
답변 3
사용 중인 같은 기능
<script type="text/javascript" charset="utf-8">
$(function () {
let scrolltop_before = 0;
let scrolltop_after = 0;
function fn_evt_scroll(e) {
scrolltop_after = document.documentElement.scrollTop;
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;
}
$(window).on("scroll", fn_evt_scroll);
});
$(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'); //클래스 제거
}
});
});
</script>
감사합니다
현재 스크롤 높이가 0이면
기존 css들을 지우고 .nav-down 추가한다 명령어 넣으시면 될거 같은데요?
감사합니다
요거는 다른 스크립트를 이용하여 해결하였습니다.
우선 초보자에게는 , ^^;;; 이 방법이 더 쉬운것같아, 소스 공유합니다.
우선 홈페이지 메인 이미지가 헤더 영역을 모두 덮어버리려고요 헤더를 고정헤더로 만들었습니다.
스크롤을 내리면, 헤더 영역이 흰색 배경과 글자 컬러가 바뀌게 하고 싶었습니다.
그누보드 head.php파일 수정
<script type="text/javascript" src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
// 스크롤 높이에 따른
$(window).scroll( function() {
var scrollTop = $(window).scrollTop();
if (scrollTop > 0){
$("#hd,#nav").addClass("fix");
} else {
$("#hd,#nav").removeClass("fix");
}
});
</script>
변경해야될 곳 hd , nav부분
스크롤 내리면 해당 영역에 fix클래스 생김
그누보드 head.php 원본
<header id="hd" class="main">
<nav id="nav">
클래스를 더 추가하고 싶으면, 이부분에 추가
$("#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;
}