helloworddd
20
2020-10-22 08:38:41
1
299

JS 스크롤 헤더 숨기기, 나타내기



$(window).on({
		'scroll':function(){
			if(resizeChk != 0){
				var sc = $(this).scrollTop();
				var h_offset = $('.top_area').innerHeight();
				if(sc > h_offset){
					$('#header_wrap header').addClass('h_on');
					$('#header_wrap').css('padding-top',$('#header_wrap header').outerHeight());
					$('.fixed_btn_top').show();
				}else{
					$('#header_wrap header').removeClass('h_on');
					$('#header_wrap').css('padding-top',0);
					$('.fixed_btn_top').hide();
				}
			}
		}
	});
#header_wrap {}
#header_wrap header { width:100%; min-width:320px; background:#fff; z-index:300;}
#header_wrap header.h_on {position:fixed; top:0; left:0; background:none;}
#header_wrap header .header_box {position: relative;}

안녕하세요. 

간단한 모바일 사이트 수정중인데

스크롤 내리면 헤더박스가 숨겨지고 맨위로 안올리더라도 중간에서 조금만 스크롤을 올리면 헤더박스를 나타나게 하고 싶은데 

저 코드에서 어떻게 수정을 해야 할까요...?

미리 감사드림니다!! 

0
  • 답변 1

  • SONGJAVA Developer
    241
    2020-10-22 08:49:11

    간단하게는 header에 height를 세로크기를 100정도 주시고
    스크립트에서 scrollTop 위치가 height보다 크면 숨기고,
    그 이외는 보여주게하시면되요

    조금더 자연스러운건 간격을 50정도주셔도 되구요
    Ex if (scrollTop > 150) show()  else hide()

    Height를 고정하는게싫다면 jquey offset()을 참고하셔서 비교하셔도 될거에요
  • 로그인을 하시면 답변을 등록할 수 있습니다.