[jQuery] navigation position sticky scroll event

html

<div class="navi_wrap js_navi_wrap">
    <ul class="navi_menu js_navi_menu">
        <li>
            <a href="#n" data-target="sec_01">
                <span>menu 01</span>
            </a>
        </li>
        <li>
            <a href="#n" data-target="sec_02">
                <span>menu 02</span>
            </a>
        </li>
        <li>
            <a href="#n" data-target="sec_03">
                <span>menu 03</span>
            </a>
        </li>
        <li>
            <a href="#n" data-target="sec_04">
                <span>menu 04</span>
            </a>
        </li>
    </ul>
</div>

 

 

js

function tabScroll(){
	$('.navi_menu li a').on('click', function(){
		let targetId = $(this).data('target'),
			targetSec = $('#' + targetId).offset().top,
			targetSec1 = targetSec - 200;
		$('html').animate({
			scrollTop : targetSec1
		}, '2000');
		return false;
	})

	//sticky menu
	$(window).scroll(function(){
		let tabMenu = $('.navi_wrap'),
			menuTop = tabMenu.offset().top,
			crtTop = $(window).scrollTop();
		if(menuTop < crtTop){
			tabMenu.addClass('fixed');
		}else{
			tabMenu.removeClass('fixed');
		}
	});
}

 

 

css

/* navigation */
.navi_wrap{
	position: relative;
	z-index: 10;
	height: 97px;
}
.navi_wrap.fixed .navi_menu{
	position: fixed;
	top: 0;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	width: 1200px;
}
.navi_menu{
	display: flex;
}
.navi_menu li{
	width: calc((100% - 51px)/4);
	border: 2px solid transparent;
	border-radius: 0 0 20px 20px;
	text-align: center;
	-webkit-transition: transform 0.3s;
	transition: transform 0.3s;
}
.navi_menu li + li{
	margin-left: 17px;
}

.navi_menu li a{
	display: block;
	padding: 28px 0;
	color: #fff;
	text-align: center;
}
.navi_menu li a span{
	display: inline-block;
	margin-right: 10px;
	font-size: 28px;
	color: #fff;
	vertical-align: middle;
}


/* color custom */
.navi_menu li:nth-child(1),
.point_sec_01 .item .label{
	background-color: #d34637;
	border-color: #9e2c23;
	box-shadow: 3px 4px 0 0 #9e2c23;
}
.navi_menu li:nth-child(2),
.point_sec_02 .item .label{
	background-color: #d9479d;
	border-color: #b0357a;
	box-shadow: 3px 4px 0 0 #b0357a;
}
.navi_menu li:nth-child(3),
.point_sec_03 .item .label{
	background-color: #3987e9;
	border-color: #226bc6;
	box-shadow: 3px 4px 0 0 #226bc6;
}
.navi_menu li:nth-child(4),
.point_sec_04 .item .label{
	background-color: #4ebf90;
	border-color: #2f9b6e;
	box-shadow: 3px 4px 0 0 #2f9b6e;
}