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. 修改表中的enum字段

    alter table 表名 modify 字段名 enum('system','audit','account','secadmin') DEFAULT NULL;

  2. MySQL---InnoDB引擎隔离级别详解

    原帖:http://www.cnblogs.com/snsdzjlz320/p/5761387.html SQL标准定义了4种隔离级别,包括了一些具体规则,用来限定事务内外的哪些改变是可见的,哪些是不 ...

  3. Vue.js 上传文件(后台使用.net)

    页面部分 <div id="app"> <form id="myform"> <input type="file&quo ...

  4. 【bzoj1495】[NOI2006]网络收费 暴力+树形背包dp

    题目描述 给出一个有 $2^n$ 个叶子节点的完全二叉树.每个叶子节点可以选择黑白两种颜色. 对于每个非叶子节点左子树中的叶子节点 $i$ 和右子树中的叶子节点 $j$ :如果 $i$ 和 $j$ 的 ...

  5. windows200364位iis6 php环境搭建

    最近接一个小活,就是帮着部署个php网站,服务器是window2003,iis6.之前在我自己得服务器上已经搭建过php环境,区别是我的服务器windows2012,而对方的是windows 2003 ...

  6. 吉哥系列故事――完美队形II HDU - 4513(马拉车变一下形)

    题意: 求最长回文串...但这个回文串要符合从中间到两头 逐个递减 解析: 在扩散的时候加一个判断就好了 #include <iostream> #include <cstdio&g ...

  7. MySQL5.7初始配置

    MySQL5.7初始配置 Windows7 环境安装MySQL5.7配置命令 <<<<<<<<<<<<<<<& ...

  8. Red Hat下升级python的问题

    分为两部分: 一,升级Python 安装的包的渠道(传送门),安装过程的渠道(传送门). 二.涉及的问题 1.yum不能使用 解决办法(传送门),其中的部分就行.

  9. android adb devices 后出现offline问题的解决

    Android在使用adb 命令时有时会发现设备的状态是offline,我的神呀,这怎么让我们调试呢.必须解决这个问题. 解决方式如下: 以下方法请确保你的设备处于调试模式下. 方法一:执行 #adb ...

  10. Python3 字典 fromkeys()方法

     Python3 字典 描述 Python 字典 fromkeys() 函数用于创建一个新字典,以序列seq中元素做字典的键,value为字典所有键对应的初始值. 语法 fromkeys()方法语法: ...