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. IDEA换行CRLF, LF, CR的解释和默认设置

    在window下开发有一个大坑,就是换行默认是CRLF,也就是回车换行,但是Linux下只有换行LF,这样代码提交后,会出现编译问题,所以最好的办法是在IDEA下设置默认为LF. 首先我们先介绍CRL ...

  2. PC和FPGA间的串口通信实现

    应用笔记 V1.0 2015/03/26 PC和FPGA间的串口通信实现   概述   本文将介绍PC和FPGA间的串口通信实现的基本思路和Verilog代码,对于通信而言,收发双方都要有相应的控制. ...

  3. LDPC译码器的FPGA实现

    应用笔记 V0.0 2015/3/17 LDPC译码器的FPGA实现   概述   本文将介绍LDPC译码器的FPGA实现,译码器设计对应CCSDS131x1o1s文档中提到的适用于深空通信任务的LD ...

  4. 【Python】Python对象类型及其运算

    Python对象类型及其运算 基本要点: 程序中储存的所有数据都是对象(可变对象:值可以修改 不可变对象:值不可修改) 每个对象都有一个身份.一个类型.一个值 例: >>> a1 = ...

  5. P2812 校园网络【[USACO]Network of Schools加强版】

    题目背景 浙江省的几所OI强校的神犇发明了一种人工智能,可以AC任何题目,所以他们决定建立一个网络来共享这个软件.但是由于他们脑力劳动过多导致全身无力身体被♂掏♂空,他们来找你帮助他们. 题目描述 共 ...

  6. Find the hotel HDU - 3193(RMQ)

    题意: 有n个旅馆,从这n个旅馆中找出若干个旅馆,使得这若干个旅馆满足这样的条件:不能从其它和剩下的旅馆中找到一个价格和距离都小于这个旅馆的旅馆... 解析: 按price 排序,若price相同, ...

  7. linux 修改 elf 文件的dynamic linker 和 rpath

    linux 修改 elf 文件的dynamic linker 和 rpath https://nixos.org/patchelf.html 下载地址 https://nixos.org/releas ...

  8. byte数组转float实现与byte转换其它类型时进行&运算原理

    下面是将byte数组转换为float的实现 public static float getFloat(byte[] b) { int accum = 0; accum = accum|(b[0] &a ...

  9. 【BZOJ1143】祭祀(网络流)

    [BZOJ1143]祭祀(网络流) 题面 BZOJ 洛谷 Description 在遥远的东方,有一个神秘的民族,自称Y族.他们世代居住在水面上,奉龙王为神.每逢重大庆典, Y族都 会在水面上举办盛大 ...

  10. nginx服务器去掉url中的index.php 和 配置path_info

    隐藏index.php server { listen 80; server_name yourdomain.com; root /home/yourdomain/www/; index index. ...