원페이지 스크롤

원페이지 스크롤

html

<div class="wrap">

<header>

<nav>

<ul>

<li class="on"><a href="javascript:;">클릭 1</a></li>

<li><a href="javascript:;">클릭 2</a></li>

<li><a href="javascript:;">클릭 3</a></li>

<li><a href="javascript:;">클릭 4</a></li>

<li><a href="javascript:;">클릭 5</a></li>

<li><a href="javascript:;">클릭 6</a></li>

</ul>

</nav>

</header>

<section id="section0"></section>

<section id="section1"></section>

<section id="section2"></section>

<section id="section3"></section>

<section id="section4"></section>

<section id="section5"></section>

</div>

javascript

var _w,

_sT;

var _sections;

var $navCont = $( "nav" ),

$navTarget = $navCont.children( "ul" ).children( "li" );

function create()

{

_w = $( window );

_sections = $( "section" );

}

function addEvent()

{

scrollEvent( null );

_w.on( "scroll" , scrollEvent );

$navTarget.on( "click", navClick );

}

var _index = 0;

var _prevIndex = -1;

//스크롤 실행 시 네비 index값 찾기

function ShowScroll( $index )

{

_index = $index;

if( _index == _prevIndex ) return;

$navTarget.removeClass( "on" );

$navTarget.eq( _index ).addClass( "on" );

_prevIndex = _index ;

}

//네비게이션 클릭 시

function navClick( $e, $index )

{

var index = $( this ).index();

var top = _sections.eq( index ).offset().top;

TweenMax.to( $( "html, body" ), 0.5, { scrollTop: top, ease:Expo.easeInout });

}

//스크롤 실행 함수

function scrollEvent( $e)

{

var index = 0;

var _sT = _w.scrollTop();

var hH = $( "header" ).height();

_sections.each( function ( i ){

var itemTop = $( this ).offset().top;

var isHeader = itemTop - hH;

if ( _sT >= isHeader ){

index = i;

console.log( isHeader, index );

}

});

ShowScroll( index );

}

예제로 만든 샘플

http://ux.adqua.co.kr/ux/ixkfo86/test/onepageScroll/index.html