https://www.bsfuji.tv/top/common/js/tab.js

1function tab_set(){
2    var $win =$(window);
3    var $header =$("header");
4    var $tab =$(".tabnav");
5	var $tabBtn =$(".tabnav li");
6    var tabHeight = $tab.outerHeight();
7    var tabPos = $tab.offset().top;
8    var fixedClass = "is-tabFixed"; // タブ全体を固定	
9	var headerH = $('header').outerHeight();
10	var window_w = $win.width();
11	var break_point = 768;
12	var defaultBtn;
13	var setPosition1 = tabHeight;
14	var setPosition2 = headerH;
15
16	if(window_w >= break_point){
17		tabPos = tabHeight;
18	}
19	
20	//alert(setPosition2);
21	
22	//z-index付与とactiveボタン取得
23	$tabBtn.each(function(i){		
24		$tabBtn.eq(i).css('z-index',110 - i);		
25		if($tabBtn.eq(i).hasClass('active')){
26			defaultBtn = i;			
27		}
28	});
29
30	
31	//defaultのボタンごとの位置へスクロール
32	var scrollPoint = (defaultBtn * 100) - 100;
33	var scrollPoint2 = (defaultBtn * 60) - 100;	
34	var effectFlag = 'on';
35	scrollEffect2(scrollPoint2);
36	
37    $win.on("load scroll", function () {
38      var value =$(this).scrollTop();
39      if (window_w < break_point || value > tabHeight) {
40        $tab.addClass(fixedClass);
41		if(effectFlag == 'on'){
42			scrollEffect2(scrollPoint2);
43	  	}
44      } else {
45			
46		effectFlag = 'on';
47        $tab.removeClass(fixedClass);
48		scrollEffect(scrollPoint);
49      }
50    }); // タブ単体
51	
52	
53	function scrollEffect (scrollPoint){
54		$tab.children('ul').stop();
55		$tab.children('ul').animate({scrollLeft:scrollPoint});
56	}
57	
58	function scrollEffect2 (scrollPoint2){
59		$tab.children('ul').stop();
60		$tab.children('ul').animate({scrollLeft:scrollPoint2});
61		return effectFlag = 'off';
62	}
63
64	$tabBtn.hover(function(){
65
66		$tabBtn.removeClass('active');
67		$(this).addClass('active');
68
69		var getBG = $(this).children('a').css('background-color');
70		$tab.css('border-color',getBG);
71		
72	},function(){
73		$tabBtn.removeClass('active');
74		$tabBtn.eq(defaultBtn).addClass('active');		
75	});
76
77}