关于section-scroll插件：

关于section-scroll插件：是可生成垂直整页滚动导航的jQuery插件。

使用方法

下载压缩包，在页面中引入jquery，jquery.section-scroll.js和section-scroll.css文件。如果你需要制作带easing效果的动画过渡效果，可以引入jquery.easing.1.3.js文件。

< link href = "css/section-scroll.css" rel = "stylesheet" />

< script src = "js/jquery.min.js" ></ script >

< script src = "js/jquery.easing.1.3.js" ></ script >  <!--easing效果的动画过渡效果-->

< script src = "js/jquery.section-scroll.js" ></ script >

HTML结构

该插件会将每一个<section>元素作为一个段落，每一个滚动导航按钮会对应一个段落。

< div class = "scrollable-section" data-section-title = "段落-1" ></ div >

< div class = "scrollable-section" data-section-title = "段落-2" ></ div >

< div class = "scrollable-section" data-section-title = "段落-3" ></ div > 

scrollable-section是你想要加入到滚动导航中的<section>。data-section-title插件会将该属性作为导航菜单项的标题。 

<script type= "text/javascript" >

   $(document).ready( function () {

       $( 'body' ).sectionScroll({　　　　　　

         bulletsClass: 'section-bullets' ,    //设置圆点导航菜单的class类

         sectionsClass: 'scrollable-section' ,   //默认插件会查找class为scrollable-section的<section>元素作为滚动的段落，通过该参数可以改变这个class


         scrollDuration: 1000,   //从一个section滚动到另一个section的持续时间


         titles: true ,  //设置为false可以在导航中隐藏标题


         topOffset: 0,  //例如设置该值为100会在滚动到section时，section距离页面顶部100像素


         easing: ''

 

});

   })

 

</script>

 

 

事件

• section-reached：当每一个section滚动进入屏幕时都会触发该事件。
• $( 'body' ).on( 'section-reached' , function (){

       console.log( 'section-reached' );

  }) 

   

  $( 'body' ).on( 'section-reached' , function (){

       var section_title = $( 'body' ).sectionScroll.activeSection.data( 'section-title' );

       alert(section_title);

  })