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>
jquery.sticky 粘性滚动插件使用的更多相关文章
- 精心挑选10款优秀的 jQuery 图片左右滚动插件
在现代的网页设计中,图片和内容滑块是一种极为常见和重要的元素.你可以从头开始编写自己的滑动效果,但是这将浪费很多时间,因为网络上已经有众多的优秀的 jQuery 滑块插件.当然,如果要从大量的 jQu ...
- Infinite Scroll - jQuery & WP 无限滚动插件
无限滚动(Infinite Scroll)也称为自动分页.滚动分页和无限分页.常用在图片.文章或其它列表形式的网页中,用来在滚动网页的时候自动加载下一页的内容.Infinite Scroll 这款 ...
- jQuery全屏滚动插件fullPage.js中文帮助文档API
jQuery全屏滚动插件fullPage.js中文帮助文档API 发现了一个fullPage.js插件,于是百度了一下,还就是这个插件的作用,其实有很多网站都做了全屏滚动的特效,效果也很好看,今天 ...
- jQuery全能图片滚动插件
插件开发背景 随着前端开发领域越来越受到重视,前端开发也变得越来越火热.各种优秀的前端组件层出不穷.尤其是jQuery插件,很多前端组件都是基于jQuery开开发的. 图片滚动是前端开发中可以说是非常 ...
- Scrollify – jQuery全屏滚动插件
和 fullPage.js 一样,Scrollify 也是一款基于 jQuery 的全屏滚动插件.跟 fullPage.js 相比,Scrollify 更加小巧,压缩后不足 4KB.但功能上不如 fu ...
- 学习 | jQuery全屏滚动插件FullPage.js
简介 fullPage.js是一个基于jQuery的全屏滚动插件,它能够很方便.很轻松的制作出全屏网站. 主要功能 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 C ...
- 一款经典的jQuery kxbdMarquee 无缝滚动插件
<marquee> 曾是 IE 下独有的一个走马灯效果的标签,其他浏览器并不兼容,于是出现了使用 JavaScript 来模拟该效果的插件. 版本: jQuery v1.3.2+ 在线实例 ...
- 仿小米网jQuery全屏滚动插件fullPage.js
演 示 下 载 简介 如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.比如 iPhone 5C 的介绍页面,QQ浏 ...
- 【转载】jQuery全屏滚动插件fullPage.js
文章转载自dowebok http://www.dowebok.com/ 原文链接:http://www.dowebok.com/77.html 简介 如今我们经常能见到全屏网站,尤其是国外网站.这些 ...
随机推荐
- win10,安装 vmware 后没有虚拟网卡,导致虚拟机没有 ip
1.确认关闭windows firewall 服务,最保险的关闭时先把服务改为手动再关闭防止塔自动启动! 2.确认开启Device Install Service .Device Setup Ser ...
- 04 . Vue组件注册,组件间数据交互,调试工具及组件插槽介绍及使用
vue组件 组件(Component)是 Vue.js 最强大的功能之一. 组件可以扩展 HTML 元素,封装可重用的代码. 组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的 ...
- 一文解析TCP/UDP
声明:本文部分内容来自互联网.书籍等渠道,表示感谢: 转载请注明出处:@热风.https://www.cnblogs.com/refeng/p/13996657.html 目录 TCP/UDP详解 1 ...
- ceph luminous 新功能之内置dashboard
前言 ceph luminous版本新增加了很多有意思的功能,这个也是一个长期支持版本,所以这些新功能的特性还是很值得期待的,从底层的存储改造,消息方式的改变,以及一些之前未实现的功能的完成,都让ce ...
- K8S环境的Jenkin性能问题描述
Return Homezq2599 CnBlogsHomeContactAdminPosts - 75 Articles - 0 Comments - 16 K8S环境的Jenkin性能问题处理 环境 ...
- 每天一个linux命令之top
每天一个linux命令之top 转 https://www.linuxprobe.com/chapter-02.html 在图2-6中,top命令执行结果的前5行为系统整体的统计信息,其所代表的含义 ...
- [原题复现]强网杯 2019 WEB高明的黑客
简介 原题复现: 考察知识点:python代码编写能力... 线上平台:https://buuoj.cn(北京联合大学公开的CTF平台) 榆林学院内可使用信安协会内部的CTF训练平台找到此题 简 ...
- 还不懂Java高并发的,建议看看这篇阿里大佬的总结,写的非常详细
前言 进程是计算机中程序关于某几何数据集合上的一次运行活动,是系统进行资源分配和调度的基本单位.是操作系统结构的基础 线程可以说是轻量级的进程,是程序执行的最小单位,使用多线程而不用多进程去进行并发程 ...
- zabbix的搭建及操作(1)server-client架构
实验环境 Server端 Centos7:192.168.10.10 server.zabbix.com 可连外网 Agent 端 Centos7:192.168.10.20 ...
- PDF编辑:pdfFactory文本备注功能详解
除了word的doc文件外,PDF也是我们经常接触到的文件格式,经常需要在pdf文件上进行编辑与修改,或者给内容做提示和备注. 文件的文本备注功能可以用pdfFactory来进行,编辑打印PDF一条龙 ...