zoukankan      html  css  js  c++  java
  • 关于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);
      }) 
  • 相关阅读:
    二分查找
    「数学」二次函数中项系数大小与图像的关系
    「数学」夹角公式
    「CF80A」Panoramix's Prediction
    「Luogu P6101」[EER2]出言不逊
    「数学」三角函数公式以及部分证明
    「Luogu P6069」[MdOI2020] Group
    「CF80B」Depression
    「数学」Menelaus定理与Ceva定理
    「AT1175」ニコニコ文字列
  • 原文地址:https://www.cnblogs.com/guanyushan/p/8006480.html
Copyright © 2011-2022 走看看