关于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);
})