当前位置: 首页 > news >正文

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

转载于:https://www.cnblogs.com/guanyushan/p/8006480.html

相关文章:

  • HDU_oj_2034 人见人爱A-B
  • pycharm mac注册
  • SQL 把特定数据排在最前面
  • 【英语】IT English (随时更新...)
  • 浙江中医药大学第十一届程序设计竞赛题解
  • 使用bind元素创建变量
  • Day1 Java编程环境和变量
  • Python中求1到20平方的两种方法
  • Go语言之讲解GOROOT、GOPATH、GOBIN
  • 评论列表显示及排序,个人中心显示
  • jQuery效果之jQuery Color animation 色彩动画扩展
  • Qt---自定义界面之QStyle
  • 再学习之Spring(面向切面编程).
  • java:解决eclipse配置Tomcat时找不到server选项
  • Qt532.QSettings_默认分隔符
  • 【vuex入门系列02】mutation接收单个参数和多个参数
  • java8-模拟hadoop
  • JavaScript 是如何工作的:WebRTC 和对等网络的机制!
  • Java多态
  • PAT A1050
  • REST架构的思考
  • Yii源码解读-服务定位器(Service Locator)
  • 工作中总结前端开发流程--vue项目
  • 关于使用markdown的方法(引自CSDN教程)
  • 简单基于spring的redis配置(单机和集群模式)
  • 如何进阶一名有竞争力的程序员?
  • 深入体验bash on windows,在windows上搭建原生的linux开发环境,酷!
  • 算法之不定期更新(一)(2018-04-12)
  • 通过git安装npm私有模块
  • 新书推荐|Windows黑客编程技术详解
  • 一些关于Rust在2019年的思考
  • 译米田引理
  • Android开发者必备:推荐一款助力开发的开源APP
  • 数据库巡检项
  • 智能情侣枕Pillow Talk,倾听彼此的心跳
  • ​软考-高级-系统架构设计师教程(清华第2版)【第1章-绪论-思维导图】​
  • #DBA杂记1
  • #NOIP 2014# day.2 T2 寻找道路
  • (C#)if (this == null)?你在逗我,this 怎么可能为 null!用 IL 编译和反编译看穿一切
  • (二)JAVA使用POI操作excel
  • (转)菜鸟学数据库(三)——存储过程
  • .bat批处理(十):从路径字符串中截取盘符、文件名、后缀名等信息
  • .NET Core Web APi类库如何内嵌运行?
  • .net开发引用程序集提示没有强名称的解决办法
  • .NET学习全景图
  • @Autowired多个相同类型bean装配问题
  • @Bean注解详解
  • [ IOS ] iOS-控制器View的创建和生命周期
  • [AutoSAR 存储] 汽车智能座舱的存储需求
  • [BROADCASTING]tensor的扩散机制
  • [BUUCTF]-Reverse:reverse3解析
  • [BZOJ1089][SCOI2003]严格n元树(递推+高精度)
  • [BZOJ2208][Jsoi2010]连通数
  • [BZOJ3211]:花神游历各国(小清新线段树)
  • [C#]使用DlibDotNet人脸检测人脸68特征点识别人脸5特征点识别人脸对齐人脸比对FaceMesh