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笔记的更多相关文章

  1. 插件使用总结-jquery.pin.js

    小伙伴们,俺昨天用了jquery.pin.js这个插件,发现了一些自以为是的使用问题.特此做个总结哈. 1.获取: 下载地址:  http://www.bootcss.com/p/jquery.pin ...

  2. jquery.form.js笔记

    由于项目的原因,需要异步上传文件,网上找了找,很多都是用jquery.form插件的,于是乎找资料,调代码,做点小笔记. 官方资料:http://www.malsup.com/jquery/form/ ...

  3. jQuery.rotate.js笔记

    1. jQuery.rotate.js是什么 一个开源的兼容多浏览器的jQuery插件用来对元素进行任意角度的旋转动画. 这个库开发的目的是为了旋转img的,在3.x之后的版本可能支持其它元素,但旋转 ...

  4. jQuery.rotate.js(控制图片转动)

    jQuery.rotate.js笔记   1. jQuery.rotate.js是什么 一个开源的兼容多浏览器的jQuery插件用来对元素进行任意角度的旋转动画. 这个库开发的目的是为了旋转img的, ...

  5. jquery.maskload.js学习笔记

    概述 Loadmask是一个jquery plugin,使用此插件可以在DOM元素加载或更改内容时为此DOM元素添加一个屏蔽层,以防止用户互动,同时起到提醒用户后台任务正在运行的作用. 使用此插件可以 ...

  6. jquery.tablesorter.js 学习笔记

    jquery.tablesorter.js 一般情况下,表格数据的排序方式有两种,第一种是让后端服务将排序后的数据直接输出,另外一种方式就是使用客户端排序,而jquery.tablesorter.js ...

  7. 表单提交学习笔记(二)—使用jquery.validate.js进行表单验证

    一.官网下载地址:http://plugins.jquery.com/validate/ 二.用法 1.在页面上进行引用 <script src="~/scripts/jquery-1 ...

  8. jquery.hichartTable.js插件绘图

    使用场景:随日期不断增长变化的数据用折线图表现出来更加直观,比如注册人数的增长等. jquery.hichartTable.js文档:http://pmsipilot.github.io/jquery ...

  9. 使用 jQuery.Pin 垂直滚动时固定导航

    ZKEACMS的导航默认是不能固定的,随着页面的滚动而滚动,为了有更好的用户体验,当页面往下滚动时,可以将导航固定在顶端,这样方便用户点击. jQuery Pin 借助jQuery的一个插件 jQue ...

随机推荐

  1. xpath的学习

    xpath的作用就是两个字“定位”,运用各种方法进行快速准确的定位,推荐两个非常有用的的firefox工具:firebug和xpath checker   定位 1.依靠自己属性,文本定位 //td[ ...

  2. [C/C++] 快速幂讲解

    转自:http://www.cnblogs.com/CXCXCXC/p/4641812.html 快速幂这个东西比较好理解,但实现起来到不老好办,记了几次老是忘,今天把它系统的总结一下防止忘记. 首先 ...

  3. DNA Sequence POJ - 2778 (ac自动机 + 快速幂)

    题意: 给出患病的DNA序列,问序列长度为n的,且不包含患病的DNA序列有多少种 解析: 以给出的患病DNA序列建trie树  患病结点要用flag标记 对于长度为n的序列 位置i有四种 情况A  C ...

  4. ubuntu adduser

    ubuntu adduser 添加用户 hexan 到目录 /home/hexan 下.$ sudo adduser hexan -home /home/hexan 添加一个普通用户adduser [ ...

  5. Linux学习笔记一:Linux配置java环境变量

    一.安装JDK: 1.创建JDK的安装目录: sudo mkdir /usr/jdk 2.将jdk-7u25-linux-x64.tar.gz拷贝至/usr/jdk目录下 sudo cp jdk-7u ...

  6. Zabbix Agent for Linux部署(四)

    一.环境介绍 二.代理安装 1.将代理程序拷贝至Node1服务器的/usr/src/zabbix3.4.5/目录下 [root@Node3 zabbix3.-.el7.x86_64.rpm zabbi ...

  7. DotNet,PHP,Java的数据库连接代码大全(带演示代码)

    C#数据库连接字符串 Web.config文件 <connectionStrings> <!--SQLServer数据库连接--> <add name="con ...

  8. IntelJ 快捷键

    1.在IntelJ中和Eclipse中稍有不同,在Eclipse中,输入main再按Alt+/即可自动补全main函数,但是在IntellJ中则是输入psvm,选中即可 2.在方法体内部有for循环, ...

  9. [知识点]C++中STL容器之vector

    零.STL目录 1.容器之map 2.容器之vector 3.容器之set 一.前言 关于STL和STL容器的概念参见STL系列第一篇——map(见上).今天介绍第二个成员——vector. 二.用途 ...

  10. 【生成树,堆】【CF1095F】 Make It Connected

    Description 给定 \(n\) 个点,每个点有点权,连结两个点花费的代价为两点的点权和.另外有 \(m\) 条特殊边,参数为 \(x,y,z\).意为如果你选择这条边,就可以花费 \(z\) ...