디자인천일공책

Html＆JQuery 스크롤 따라다니는 메뉴

페이지 정보

작성자 디자인천일 작성일Date: 2025-03-26 21:45 조회view: 9

본문

메뉴 클릭시 해당 컨텐츠로 스크롤.

클릭한 컨텐츠에 해당하는 메뉴 활성화

css

#smp_content {position:relative;width:100%;max-width:980px;margin:0 auto;}
#smp_content:after {display:block;visibility:hidden;clear:both;content:""}

ul.tab_tit {display:block;width:100%;background:#fff;z-index:1;}
ul.tab_tit:after {display:block;visibility:hidden;clear:both;content:""}
ul.tab_tit li {display:block;float:left;width:33.33%;}
ul.tab_tit li a {display:block;color:#fff;line-height:60px;text-align:center;background:#111;}
ul.tab_tit li a.active {background:#37be00}

ul.tab_tit.sticky {position:sticky;top:80px;}

.smp_cont {padding:40px 20px;}
.smp_cont h3 {display:block;margin:0 0 20px 0;font-size:18px;font-weight:700;}
.smp_cont p {min-height:640px;}

html

<div id="smp_content">

	<ul class="tab_tit">
		<li><a href=".tab1" class="active">상품 설명</a></li>
		<li><a href=".tab2">상품 리뷰</a></li>
		<li><a href=".tab3">상품 정보</a></li>
	</ul>

	<div class="smp_cont tab1">
		<h3>상품설명</h3>
		<p>...</p>
	</div>

	<div class="smp_cont tab2">
		<h3>상품리뷰</h3>
		<p>...</p>
	</div>

	<div class="smp_cont tab3">
		<h3>상품정보</h3>
		<p>...</p>
	</div>

</div>

jQuery/Javascript

$('.tab_tit a').click(function(event) {
	var id = $(this).attr("href");
	var offset = 110;
	var target = $(id).offset().top - offset;
	$('html, body').animate({
		scrollTop: target
	}, 500);
	event.preventDefault();
});

/* scroll function */
$(window).scroll(function() {
	var h = $('#smp_content').offset().top;
	if ($(window).scrollTop() > h) {
		$('.tab_tit').addClass('sticky');
	} else {
		$('.tab_tit').removeClass('sticky');
	}
	
	var currentTop = $(window).scrollTop();
	var tab1_offset = $('.tab1').offset().top - 180;
	var tab2_offset = $('.tab2').offset().top - 180;
	var tab3_offset = $('.tab3').offset().top - 180;
	$('.tab_tit a').removeClass('active');

	if (currentTop >=  0 && currentTop < tab2_offset) {
		$('.tab_tit a').eq(0).addClass('active');
	} else if( currentTop >=  tab2_offset && currentTop < tab3_offset ) {
		$('.tab_tit a').eq(1).addClass('active');
	} else if( currentTop >=  tab3_offset ) {
		$('.tab_tit a').eq(2).addClass('active');
	}
});

Sample screen show/hide