$('#aside').fadeOut(200);
$(window).on('scroll', function () {
var sTop = $(window).scrollTop();
showAside(sTop);
activateQuickMenu(sTop);
});
function showAside(sTop) {
if (sTop > $('#section1').offset().top - 5) {
$('#aside').fadeIn(200);
} else {
$('#aside').fadeOut(200);
}
}
function activateQuickMenu(sTop) {
$('.section').each(function () {
var id = $(this).attr('id'),
offset = $(this).offset().top,
height = $(this).height();
if (sTop >= offset && sTop < offset + height) {
$('#aside .menuItem').removeClass('active');
$('#aside').find(`[data-scroll=${id}]`).addClass('active');
}
});
}
<div class="aside" id="aside">
<h3 class="title"></h3>
<ul class="quick">
<li class="menuItem" data-scroll="section1"><a href="#section1" class="flexCenter">지리는 <br> 승국쌤인 이유!</a></li>
<li class="menuItem" data-scroll="section2"><a href="#section2" class="flexCenter">About 승국쌤</a></li>
<li class="menuItem" data-scroll="section3"><a href="#section3" class="flexCenter">승국쌤의 <br>포커싱&언박싱 강좌</a></li>
<li class="menuItem" data-scroll="section4"><a href="#section4" class="flexCenter">지리는 승국쌤 영상</a></li>
<li class="menuItem" data-scroll="section5"><a href="#section5" class="flexCenter">승국쌤의 응원</a></li>
</ul>
<button class="btnTop">TOP</button>
</div>
<div class="topCont">
<div id="section1" class="section">section1</div>
<div id="section2" class="section">section2</div>
<div id="section3" class="section">section3</div>
<div id="section4" class="section">section4</div>
<div id="section5" class="section">section5</div>
</div>