플로팅 네비참고

beomhak lee·2024년 4월 18일

work_tip

목록 보기
16/37
// 스크롤시 플로팅 메뉴 컨트롤
        $('#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>

0개의 댓글