CODING TIP/JavaScript
(9) 스크롤로 각 섹션에 진입 시 gnb 메뉴 온/오프 기능
주히토끼
2018. 3. 29. 15:02
< (9) 스크롤로 각 섹션에 진입 시 gnb 메뉴 온/오프 기능 >
$window.on('scroll', scrollEvent );
var $scollTop = $window.scrollTop();
var $headerHeight = $('.header').height();
if( $scollTop >= $('.section5').offset().top - $('.section4').height()/2 ) {
$('.gnb li').removeClass('on');
$('.gnb li:eq(3)').addClass('on');
} else if( $scollTop >= $('.section4').offset().top - $headerHeight-100 ) {
$('.gnb li').removeClass('on');
$('.gnb li:eq(2)').addClass('on');
} else if( $scollTop >= $('.section3').offset().top - $headerHeight-100 ) {
$('.gnb li').removeClass('on');
} else if( $scollTop >= $('.section2').offset().top - $headerHeight-100 ) {
$('.gnb li').removeClass('on');
$('.gnb li:eq(1)').addClass('on');
} else {
$('.gnb li').removeClass('on');
$('.gnb li:eq(0)').addClass('on');
}