罗和正单双中特

jQuery自动生成垂直整页滚动导航插件section-scroll.js

所属分类:UI,导航-滚动,其他导航

 2085  30  查看评论 (0)
分享到微?#25490;?#21451;圈
X
jQuery自动生成垂直整页滚动导航插件section-scroll.js ie兼容9

section-scroll.js

用于自动生成可滚动部分导航的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> 
<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插件会将该属性作为导航菜单项的标题。

初始化插件

在页面DOM元素加载完毕之后,可以通过下面的方法来初始化section-scroll.js插件。

<script type="text/javascript"> 
  $(document).ready(function () { 
      $('body').sectionScroll(); 
  }) 
</script>

配置参数

section-scroll.js插件的默认配置参数是:

bulletsClass: 'section-bullets',
sectionsClass: 'scrollable-section',
scrollDuration: 1000,
titles: true,
topOffset: 0,
easing: ''
参数类型描述
bulletsClassstring设置圆点导航菜单的class类
sectionsClassstring默认插件会查找class为scrollable-section<section>元素作为滚动的段落,通过该参数可以改变这个class
scrollDurationint从一个section滚动到另一个section的?#20013;?#26102;间
titlesboolean设置为false可以在导航中隐藏标题
topOffsetint例如设置该值为100会在滚动到section时,section距离页面顶部100像素
easingstring默认情况下该插件不提供easing效果,你可以引入http://gsgd.co.uk/sandbox/jquery/easing/插件之后在使用该参数来设置easing效果。easing的取值可以查看http://easings.net/

事件

section-reached:当每一个section滚动进入屏幕时都会触发该事件。

$('body').on('section-reached', function(){ 
    console.log('section-reached'); 
})

小?#35760;?/strong>

该插件也可以通过变量activeSection来访?#26102;?#28608;活的section。例如:

$('body').on('section-reached', function(){
    var section_title = $('body').sectionScroll.activeSection.data('section-title');
    alert(section_title);
})

再看下面的例子:

<section class="scrollable-section" data-short-description="We love coding"></section>

现在我们可以获取section的标题信息,打印在div中。

$('body').on('section-reached', function(){
    var short_description = $('.body').sectionScroll.activeSection.data('short-description');
    $('div').html(short_description);
    // 我们还可以将激活section的背景色进行修改
    $('body').sectionScroll.activeSection.css('background-color', '#000'); 
})
相关插件-滚动,其他导航

向下滚动加载动画特效插件AOS

向下滚动网页加载动画特效插件AOS
  滚动
 21562  234

jQuery滚动楼层效果

jQuery滚动楼层效果,通俗简单好上手,js中有详细步骤解析。
  滚动
 23397  223

常用的根据高度自动切换效果

常用的根据高度自动切换效果 简单 下载下来之后可以直接是用 兼容性好 不存在兼容问题
  滚动
 17419  171

jQuery仿京东楼层滑动侧边栏高亮(原创)

jQuery模仿京东侧边栏点击滑动到该楼层,同时侧边栏随着页面滚动对应导航高亮。
  滚动
 20720  192

讨论这个项目(0)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

取消回复
罗和正单双中特
安卓比较好的赚钱软件 租朋友群挂机刷广告赚钱是真的吗 信誉高娱乐棋牌游戏 足球4场进球彩 安徽快三今日开奖 加拿大快乐8开奖号码 东心经三肖中特 dnf90版本附魔赚钱吗 福建36选7开奖查询 3d今天6码复式