zoukankan      html  css  js  c++  java
  • jquery.sticky 粘性滚动插件使用

    一个jQuery插件,使你能够做任何元素在您的网页上总是可见的,可以作为顶部固定导航显示插件。

    官网地址:http://stickyjs.com/

    github:https://github.com/garand/sticky

    插件依赖于jq核心库,需要引入!

    该博客导航固定使用了此插件

    <script src="jquery.js"></script>
    <script src="jquery.sticky.js"></script>
    <script>
      $(document).ready(function(){
        $("#sticker").sticky({topSpacing:0});
      });
    </script>

    解绑sticky

    <script>
      $("#sticker").unstick();
    </script>

    Options

    • topSpacing: (default: 0) 页面顶部和元素顶部之间的像素。
    • bottomSpacing: (default: 0) 页面底部和元素底部之间的像素。
    • className: (default: 'is-sticky') “粘贴”时添加到元素包装器的CSS类。
    • wrapperClassName: (default: 'sticky-wrapper') CSS类添加到包装器。
    • center: (default: false) 用于确定粘性元素是否应在页面中水平居中。
    • getWidthFrom: (default: '') 所引用元素的选择器,用于设置“粘性”元素的固定宽度。
    • widthFromWrapper: (default: true布尔值,确定是否应更新“粘性”元素的宽度以匹配包装器的宽度。包装器是固定的(不包含静态元素)固定元素的占位符,其宽度取决于上下文和CSS规则。仅在getWidthForm未设置的情况下有效。
    • responsiveWidth: (default: false) 布尔值,确定是否将在调整窗口大小时(使用getWidthfrom)重新计算宽度
    • zIndex: (default: inherit) 控制所粘贴元素的z-index

    Events

    • sticky-start: 元素变粘时。
    • sticky-end: 元素返回其原始位置时
    • sticky-update: 粘贴元素时,但由于约束原因必须更新位置
    • sticky-bottom-reached: 元素达到底部空间限制时
    • sticky-bottom-unreached: 当元素未达到底部空间限制时
    <script>
      $('#sticker').on('sticky-start', function() { console.log("Started"); });
      $('#sticker').on('sticky-end', function() { console.log("Ended"); });
      $('#sticker').on('sticky-update', function() { console.log("Update"); });
      $('#sticker').on('sticky-bottom-reached', function() { console.log("Bottom reached"); });
      $('#sticker').on('sticky-bottom-unreached', function() { console.log("Bottom unreached"); });
    </script>
  • 相关阅读:
    DirectX标准规定 DirectX和OpenGL的不同
    Android 抽屉效果的导航菜单实现
    Servlet基础(三) Servlet的多线程同步问题
    Java微服务之Spring Boot on Docker
    Spring Cloud 微服务架构学习笔记与示例
    从你的全世界路过—一群程序员的稻城亚丁游记
    从一个国内普通开发者的视角谈谈Sitecore
    吴军《硅谷来信》思维导图笔记
    .NET Core微服务之基于Jenkins+Docker实现持续部署(Part 1)
    2018OKR年中回顾
  • 原文地址:https://www.cnblogs.com/codedisco/p/12543639.html
Copyright © 2011-2022 走看看