jQuery.pin.js笔记
jQuery.pin.js是一个把元素钉在页面上某个位置的插件,它能够将某个元素一直挂在一个固定的位置而不论滚动条是否滚动。
特点:
1. 可以钉住一个元素,主要作用就是滚动超出的时候不会隐藏而是一直显示
2. 可以将一个元素钉在另一个元素内部
3. 在小屏幕上自动禁用效果
将某个元素钉起来,当滚动让它快隐藏的时候会被钉在页面顶部而不会隐藏。
$("#pinFoo").pin();
将某一个元素钉在另一个元素内,需注意当容器被隐藏的时候此元素还是会被隐藏的。
$(".pinned").pin({
containerSelector: ".container"
})
设置在小屏幕上自动禁用pin
$(".pinned").pin({
minWidth: 940
})
参考资料:
1. 官方网站(有pin住元素的例子) http://www.bootcss.com/p/jquery.pin/#link-three
2. GitHub https://github.com/webpop/jquery.pin
.
jQuery.pin.js笔记的更多相关文章
- 插件使用总结-jquery.pin.js
小伙伴们,俺昨天用了jquery.pin.js这个插件,发现了一些自以为是的使用问题.特此做个总结哈. 1.获取: 下载地址: http://www.bootcss.com/p/jquery.pin ...
- jquery.form.js笔记
由于项目的原因,需要异步上传文件,网上找了找,很多都是用jquery.form插件的,于是乎找资料,调代码,做点小笔记. 官方资料:http://www.malsup.com/jquery/form/ ...
- jQuery.rotate.js笔记
1. jQuery.rotate.js是什么 一个开源的兼容多浏览器的jQuery插件用来对元素进行任意角度的旋转动画. 这个库开发的目的是为了旋转img的,在3.x之后的版本可能支持其它元素,但旋转 ...
- jQuery.rotate.js(控制图片转动)
jQuery.rotate.js笔记 1. jQuery.rotate.js是什么 一个开源的兼容多浏览器的jQuery插件用来对元素进行任意角度的旋转动画. 这个库开发的目的是为了旋转img的, ...
- jquery.maskload.js学习笔记
概述 Loadmask是一个jquery plugin,使用此插件可以在DOM元素加载或更改内容时为此DOM元素添加一个屏蔽层,以防止用户互动,同时起到提醒用户后台任务正在运行的作用. 使用此插件可以 ...
- jquery.tablesorter.js 学习笔记
jquery.tablesorter.js 一般情况下,表格数据的排序方式有两种,第一种是让后端服务将排序后的数据直接输出,另外一种方式就是使用客户端排序,而jquery.tablesorter.js ...
- 表单提交学习笔记(二)—使用jquery.validate.js进行表单验证
一.官网下载地址:http://plugins.jquery.com/validate/ 二.用法 1.在页面上进行引用 <script src="~/scripts/jquery-1 ...
- jquery.hichartTable.js插件绘图
使用场景:随日期不断增长变化的数据用折线图表现出来更加直观,比如注册人数的增长等. jquery.hichartTable.js文档:http://pmsipilot.github.io/jquery ...
- 使用 jQuery.Pin 垂直滚动时固定导航
ZKEACMS的导航默认是不能固定的,随着页面的滚动而滚动,为了有更好的用户体验,当页面往下滚动时,可以将导航固定在顶端,这样方便用户点击. jQuery Pin 借助jQuery的一个插件 jQue ...
随机推荐
- CentOS下php安装mcrypt扩展
CentOS下php安装mcrypt扩展 Posted on 2012-09-12 15:27 C'est la vie 阅读(48294) 评论(3) 编辑 收藏 (以下步骤均为本人实际操作,可能与 ...
- 在MFC中显示cmd命令行
添加函数 void InitConsoleWindow1() { ; FILE* fp; AllocConsole(); nCrt = _open_osfhandle((long)GetStdHand ...
- pixi.js 微信小游戏 入手
pixi是什么?一款h5游戏引擎 优点:简单简洁性能第一 缺点:大多数用的国产三大引擎,pixi资料少,工具少, 为什么学,装逼 用pixi开发小游戏行吗? 行.但要简单处理下 下载官网上的 weap ...
- noip模拟题《序》sort
[问题背景] zhx 给他的妹子们排序.[问题描述] zhx有N个妹子,他对第i个妹子的好感度为ai, 且所有ai两两不相等.现在N个妹子随意站成一 排,他要将她们根据好感度从小到 ...
- 洛谷 P2146 [NOI2015]软件包管理器
真没有想到,这竟然会是一道NOI的原题,听RQY说,这套题是北大出的,北大脑抽认为树剖很难... 只恨没有早学几年OI,只A这一道题也可以出去吹自己一A了NOI原题啊 好了,梦该醒了,我们来看题 以后 ...
- 2017-2018-2 20165218 实验三《敏捷开发与XP实践》实验报告
实验三 敏捷开发与XP实践 课程:java程序设计 姓名:赵冰雨 学号:20165218 指导教师:娄嘉鹏 实验日期:2018.4.30 实验内容.步骤与体会: (一)编码标准 //实验要求 //参考 ...
- Hexo之我的桌角女友的食用方式
秀秀 通过使用一个名为 hexo-helper-live2d 的开源库,可以轻松的在自己的Hexo网站下贴上一只生猛可爱的萌妹子或主子: 什么是live2d Live2d是11区宅男们开发出的虚拟女友 ...
- _MSC_VER
https://msdn.microsoft.com/en-us/library/vstudio/b0084kay.aspx Evaluates to an integer literal that ...
- Codeforces 585.D Lizard Era: Beginning
D. Lizard Era: Beginning time limit per test 2 seconds memory limit per test 256 megabytes input sta ...
- Codeforce 633.C Spy Syndrome 2
C. Spy Syndrome 2 time limit per test 2 seconds memory limit per test 256 megabytes input standard i ...