고정헤더 ,스크롤을 내리면 헤더 사라지고 올리면 헤더 나타나고,

고정헤더 ,스크롤을 내리면 헤더 사라지고 올리면 헤더 나타나고,

QA

고정헤더 ,스크롤을 내리면 헤더 사라지고 올리면 헤더 나타나고,

답변 3

본문

기본값 .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 추가한다 명령어 넣으시면 될거 같은데요?

요거는 다른 스크립트를 이용하여 해결하였습니다. 

우선 초보자에게는 , ^^;;; 이 방법이 더 쉬운것같아, 소스 공유합니다. 

 

우선 홈페이지 메인 이미지가 헤더 영역을 모두 덮어버리려고요 헤더를 고정헤더로 만들었습니다.

 

235276958_1672118057.4657.png

 

스크롤을 내리면, 헤더 영역이 흰색 배경과 글자 컬러가 바뀌게 하고 싶었습니다. 

 

235276958_1672118099.8742.png

 

 

그누보드 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;

}

 

 

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 138
© SIRSOFT
현재 페이지 제일 처음으로