一个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>

jquery.sticky 粘性滚动插件使用的更多相关文章

  1. 精心挑选10款优秀的 jQuery 图片左右滚动插件

    在现代的网页设计中,图片和内容滑块是一种极为常见和重要的元素.你可以从头开始编写自己的滑动效果,但是这将浪费很多时间,因为网络上已经有众多的优秀的 jQuery 滑块插件.当然,如果要从大量的 jQu ...

  2. Infinite Scroll - jQuery & WP 无限滚动插件

    无限滚动(Infinite Scroll)也称为自动分页.滚动分页和无限分页.常用在图片.文章或其它列表形式的网页中,用来在滚动网页的时候自动加载下一页的内容.Infinite Scroll  这款  ...

  3. jQuery全屏滚动插件fullPage.js中文帮助文档API

    jQuery全屏滚动插件fullPage.js中文帮助文档API   发现了一个fullPage.js插件,于是百度了一下,还就是这个插件的作用,其实有很多网站都做了全屏滚动的特效,效果也很好看,今天 ...

  4. jQuery全能图片滚动插件

    插件开发背景 随着前端开发领域越来越受到重视,前端开发也变得越来越火热.各种优秀的前端组件层出不穷.尤其是jQuery插件,很多前端组件都是基于jQuery开开发的. 图片滚动是前端开发中可以说是非常 ...

  5. Scrollify – jQuery全屏滚动插件

    和 fullPage.js 一样,Scrollify 也是一款基于 jQuery 的全屏滚动插件.跟 fullPage.js 相比,Scrollify 更加小巧,压缩后不足 4KB.但功能上不如 fu ...

  6. 学习 | jQuery全屏滚动插件FullPage.js

    简介 fullPage.js是一个基于jQuery的全屏滚动插件,它能够很方便.很轻松的制作出全屏网站. 主要功能 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 C ...

  7. 一款经典的jQuery kxbdMarquee 无缝滚动插件

    <marquee> 曾是 IE 下独有的一个走马灯效果的标签,其他浏览器并不兼容,于是出现了使用 JavaScript 来模拟该效果的插件. 版本: jQuery v1.3.2+ 在线实例 ...

  8. 仿小米网jQuery全屏滚动插件fullPage.js

    演 示 下 载   简介 如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.比如 iPhone 5C 的介绍页面,QQ浏 ...

  9. 【转载】jQuery全屏滚动插件fullPage.js

    文章转载自dowebok http://www.dowebok.com/ 原文链接:http://www.dowebok.com/77.html 简介 如今我们经常能见到全屏网站,尤其是国外网站.这些 ...

随机推荐

  1. MCscan-Python-jcvi 共线性画图最后一章更新

    经过几轮调试和修改,共线性图终于可以上眼了.如下: 图中红色的为目标基因,蓝色的为reference species目标基因周围15个基因,天蓝色为再往外15个基因,黄色为与reference spe ...

  2. 线程队列分享ppt

  3. custom-ubuntu-server-iso

    Remastering the Ubuntu Desktop ISO is easy considering the existing graphical tools but did you ever ...

  4. Java(6)集合

    一.Java集合框架概述 1.什么是集合 集合框架:用于存储数据的容器. 数组.集合等存储数据的结构,叫Java容器. 此时的存储,是指内存层面的存储,不涉及持久化的存储. 任何集合框架都包含三大块的 ...

  5. ssh 方面问题总结

    ssh 远程执行命令: https://www.cnblogs.com/youngerger/p/9104144.html ssh免密登录: https://blog.csdn.net/jeikerx ...

  6. Spring Cloud实战 | 第九篇:Spring Cloud整合Spring Security OAuth2认证服务器统一认证自定义异常处理

    本文完整代码下载点击 一. 前言 相信了解过我或者看过我之前的系列文章应该多少知道点我写这些文章包括创建 有来商城youlai-mall 这个项目的目的,想给那些真的想提升自己或者迷茫的人(包括自己- ...

  7. Folx中与下载相关的参数如何设置

    Folx是一款简单易用,功能强大的MacOS专用下载管理工具.要使Folx下载/上传速度快,同时又不影响其他软件的上网使用,还能够有计划地安排下载,那么就必须对Folx进行参数设置.接下来小编详细讲解 ...

  8. 工作中使用mongodb

    写了一个mongodb的基类 1 <?php 2 3 namespace BI\Service\MongoDB; 4 5 use MongoDB\Driver\BulkWrite; 6 use ...

  9. k8S 搭建集群

    k8S 搭建集群1:修改主机名称hostnamectl --static set-hostname masterhostnamectl --static set-hostname node1hostn ...

  10. CENTOS 7平滑升级PHP到最新版7.3

    安装Remi和EPEL数据源(仓库) rpm -Uvh https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm r ...