메뉴 상단 고정, 탭이동 js

 

 

 

$(document).ready(function(){
	//menu fixed
	$.fn.Scrolling = function(object, tar){
		var _this = this;
		$(window).scroll(function(e){
			var end = object + tar;
			$(window).scrollTop() >= object ? _this.addClass("gnb-fix2") : _this.removeClass("gnb-fix2");
			if($(window).scrollTop() >= end){ _this.removeClass("gnb-fix2");}
		});
	};
	var menuAreaTop = $("#menuArea").offset().top;
	var menuFixArea = $(".contentAll").height() - $("#menuArea").height();
//	$("#menuArea").Scrolling($("#menuArea").offset().top, ($(".contentAll").height() - $("#menuArea").height()));
	$("#menuArea").Scrolling(menuAreaTop, menuFixArea);
	
	
	//tab
	$('.class-sub .tabs td').click(function(){
		
		//탭이동 시  동영상 일시정지
		fn_pauseVideo();
		
		var tab_id= $(this).attr('data-tab');
		
		$('.class-sub .tabs td').removeClass('chapter-choice');
		$('.tab-content').removeClass('current');
		
		$(this).addClass('chapter-choice');
		$("#"+tab_id).addClass('current');
		
	})
	
})

 

1. 메뉴 고정

<div class="contentAll">
<div class="gnb-fix1" id="menuArea">  
//고정할 영역
</div>
</div>

//고정상태일 때 css , 비고정 상태 일 때 css 2개 필요

 

 

 

2.탭

<table class="class-sub">
<tbody>
<tr class="tabs">
<td class="활성화 시 클래스" data-tab="tabcontent1">탭메뉴1</td>
<td data-tab="tabcontent2">탭메뉴2</td>
<td data-tab="tabcontent3">탭메뉴3</td>
</tr>
</tbody>
</table>