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. ant 安装及基础教程 !

    这篇文章主要介绍了ant使用指南详细入门教程,本文详细的讲解了安装.验证安装.使用方法.使用实例.ant命令等内容,需要的朋友可以参考下   一.概述 ant 是一个将软件编译.测试.部署等步骤联系在 ...

  2. 使用Log4在测试过程中打印执行日志 及配置log4j.properties!

    http://zengxiantao.iteye.com/blog/1881706 1.环境配置:到网上下载log4j-1.2.17.jar包!完后 添加到 项目的build path 中即可! 2. ...

  3. 【vue】父组件主动调用子组件 /// 非父子组件传值

    一  父组件主动调用子组件: 注意:在父组件使用子组件的标签上注入ref属性,例如: <div id="home"> <v-header ref="he ...

  4. C语言 aabbcc、abc、fabc、aabc

    输入一个字符串,匹配字符串中连续出现的字符串.并且连续个数相等 如输入 aabbcc.abc.fabc.aabc.aabbc 分别输出yes还是no #include<stdio.h>#i ...

  5. eclipse官方网址、各个版本的下载

    Eclipse3.1后各版本代号 (2013-07-10 20:48:42) 转载▼   分类: Java Eclipse 3.1 版本代号 IO [木卫1,伊奥]  Eclipse 3.2 版本代号 ...

  6. BZOJ 2957 楼房重建(线段树区间合并)

    一个显而易见的结论是,这种数字的值是单调递增的.我们修改一个数只会对这个数后面的数造成影响.考虑线段树划分出来的若干线段. 这里有两种情况: 1.某个线段中的最大值小于等于修改的数,那么这个线段的贡献 ...

  7. YOLO v1之总结篇(linux+windows)

    YOLO出自2016 CVPR You Only Look Once:Unified, Real-Time Object Detection,也是一个非常值得学习的框架,不得不说facebook的技术 ...

  8. BeanUtils介绍及其使用

    BeanUtils工具由Apache软件基金组织编写,提供给我们使用,主要解决的问题是:把对象的属性数据封装到对象中.在整个J2EE的编程过程中,我们经常会从各种配置文件中读取相应的数据,需要明白的一 ...

  9. BZOJ1176:[Balkan2007]Mokia——题解

    http://www.lydsy.com/JudgeOnline/problem.php?id=1176 Description(题面本人自行修改了一下) 维护一个W*W的矩阵,初始值均为0.每次操作 ...

  10. Win10如何搭建FTP服务器以实现快速传输文件

    原文链接地址:http://blog.csdn.net/bai_langtao/article/details/77751447 Win10如何搭建FTP服务器以实现快速传输文件?相信大家在工作或生活 ...