[jQuery] 특정위치에서 시작하는 스크롤 네비게이션

특정 위치에서 시작하는 스크롤 네비게이션

특정위치에서 시작하는 스크롤 네비게이션입니다.

a링크로 해당 섹션에 이동가능하고, 스크롤이 위치한 섹션에 맞춰 네비게이션 메뉴도 active 됩니다.

원페이지 홈페이지나, 랜딩페이지 제작할 때 유용하게 사용할 수 있을 것 같습니다.

필요하시다면 아래 코드확인해보시고 수정해서 사용하세요 :)

 

 

[html]

    <div class="container">
        <div class="main-img">main</div>
        <!-- 퀵메뉴 영역 -->
        <ul class="quick_menu">
            <li class="on">
                <a href="#section01" class="f16">section1</a>
            </li>
            <li>
                <a href="#section02" class="f16">section2</a>
            </li>
            <li>
                <a href="#section03" class="f16">section3</a>
            </li>
            <li>
                <a href="#section04" class="f16">section4</a>
            </li>
        </ul>
        <!-- //퀵메뉴 영역 -->
        <div id="section01" class="section target">
            section01
        </div>
        <div id="section02" class="section target">
            section02
        </div>
        <div id="section03" class="section target">
            section03
        </div>
        <div id="section04" class="section target">
            section04
        </div>
    </div>

 

 

[CSS]

/*퀵메뉴*/
.quick_menu {left:5%;position: absolute;}
.quick_menu.fixed {position: fixed;top: 5px; z-index:100}
.quick_menu  li {width: 120px;height: 35px;line-height: 35px; border-radius: 5px;background: #b2b2b2;margin-bottom: 10px;overflow: hidden}
.quick_menu  li a{color: #fff;display: block;width: 100%;height: 100%;padding:0 10px ;}
.quick_menu li.on {background: url(../images/tm_03/quick_arrow.png) no-repeat right 20px center #0368da}
.quick_menu  li a:hover {background: url(../images/tm_03/quick_arrow.png) no-repeat right 20px center #0368da}
    

.main-img {background:black;width:100%;height:500px;color:#fff;text-align:center;line-height:500px;font-size:30px}

.section{width:100%;height:500px;text-align:center;line-height:500px;font-size:30px}
#section01{background:red}
#section02{background:blue}
#section03{background:green}
#section04{background:yellow}

 

[JS]

 // a클릭시 부드럽게 이동
 $('a').click(function() {
            $('html, body').animate({
                scrollTop: $($.attr(this, 'href')).offset().top
            }, 500);
            return false;
        });

        // 퀵메뉴
        $('.quick_menu li a').click(function() {
            // 버튼 hover 이벤트
            return false
            $(this).parent().addClass('on');
            $(this).parent().siblings().removeClass('on');
        });
	// target 위치 표시와, 이동  
        var sections = $('.target'),
            nav = $('.quick_menu'),
            nav_height = nav.outerHeight();

        $(window).on('scroll', function() {
            var cur_pos = $(this).scrollTop();

            sections.each(function() {
                var top = $(this).offset().top - nav_height,
                    bottom = top + $(this).outerHeight();

                if (cur_pos >= top && cur_pos <= bottom) {
                    nav.find('a').parent().removeClass('on');
                    sections.removeClass('active');

                    $(this).parent().addClass('on');
                    nav.find('a[href="#' + $(this).attr('id') + '"]').parent().addClass('on');
                }
            });
        });

        nav.find('a').on('click', function() {
            var $el = $(this),
                id = $el.attr('href');

            $('html, body').animate({
                scrollTop: $(id).offset().top 
            }, 500);

            return false;
        });


		// 원하는 위치에서 스크롤 이벤트
        $(window).on('scroll', function() {
            if ($(window).scrollTop() > 520) {
                $('.quick_menu').addClass("fixed");
            } else {
                $('.quick_menu').removeClass("fixed");
            }
        })

 

 

 

 

 

See the Pen KKaEBYN by aldo814 (@aldo814) on CodePen.