让页面目标元素 “固定” 在浏览器窗口的顶部 stickUp+jQuery.pin 插件 使用 单页导航
插件下载地址
stickUp:点击打开链接
jQuery.pin:点击打开链接
stickUp 的使用
One Page Nav一个轻量级的jQuery的网站单页平滑滚动导航插件,One Page Nav可实点击对应的菜单项网页平滑的滚动到对应的内容区域,滚动鼠标滚轮,随着页面的滚动,菜单选项会跟随所显示的区域自动被选中。
One Page Nav单页菜单插件在页面各菜单项的内容区域外添加额外的内容块仍然可以正常的工作,不受新增内容影响。
使用方法
引入核心文件
1
2
3
|
< script src = "http://libs.baidu.com/jquery/2.0.0/jquery.min.js" ></ script >
//其它版本的jquery也可以,根据你项目的需求
< script src = "jquery.nav.js" ></ script >
|
构建html标签
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
< ul id = "nav" >
< li class = "current" >< a href = "#section-1" >Section 1</ a ></ li >
< li >< a href = "#section-2" >Section 2</ a ></ li >
< li >< a href = "#section-3" >Section 3</ a ></ li >
</ ul >
< div id = "section-1" >
< strong >Section 1</ strong >
< p >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</ p >
</ div >
< div id = "section-2" >
< strong >Section 2</ strong >
< p >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</ p >
</ div >
< div id = "section-3" >
< strong >Section 3</ strong >
< p >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</ p >
</ div >
|
写入JS,使用默认参数初始化
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
$( '#nav' ).onePageNav({
currentClass: 'current' ,
changeHash: false ,
scrollSpeed: 750,
scrollThreshold: 0.5,
filter: '' ,
easing: 'swing' ,
begin: function () {
//I get fired when the animation is starting
},
end: function () {
//I get fired when the animation is ending
},
scrollChange: function ($currentListItem) {
//I get fired when you enter a section and I pass the list item of the section
}
});
|
如果你想当用户点击时改菜单选项的hash(哈希值),那么请把changeHash设置为true.
实现过滤跳转
如果你想跳过某个菜单选项或是让这个菜单选项直接链接到其它地址,那么只需把这个菜单项的选择器传给写filter参数选项即可。
1
2
3
4
5
6
7
8
9
10
11
12
|
< ul id = "nav" >
< li class = "current" >< a href = "#section-1" >Section 1</ a ></ li >
< li >< a href = "#section-2" >Section 2</ a ></ li >
< li >< a href = "#section-3" >Section 3</ a ></ li >
< li >< a href = "#section-4" >Section 4</ a ></ li >
< li >< a href = "#section-5" >Section 5</ a ></ li >
< li >< a href = "http://google.com" class = "external" >Some other link</ a ></ li >
</ ul >
$('#nav').onePageNav({
filter: ':not(.external)'
});
|
如果在IOS设备上有问题
如果你单击菜单选项上的链接而导致其它链接失效,直到滚动才恢复,那么你可以用以下这方式来解决。
1
2
3
4
5
6
7
8
9
|
$( '#nav' ).onePageNav({
begin: function () {
//Hack so you can click other menu items after the initial click
$( 'body' ).append( '<div id="device-dummy" style="height: 1px;"></div>' );
},
end: function () {
$( '#device-dummy' ).remove();
}
});
|
css样式参考
ul {margin-left: 1em;}#nav {left: -30px;list-style: none;margin: 0;position: fixed;}#nav li {margin-bottom: 2px;}#nav a {background: #ededed;color: #666;display: block;font-size: 14px;padding: 5px 10px;text-decoration: none;text-transform: uppercase;}#nav a:hover {background: #dedede;}#nav .current a {background: #666;color: #ededed;}
demo:点击打开链接
JQuery.pin.js 的使用
“钉”住某个元素
$(".pinned").pin()
将某元素“钉”在容器内
$(".pinned").pin({containerSelector: ".container"
})
在小尺寸的屏幕上禁用Pin效果
$(".pinned").pin({minWidth: 940
})
demo: 点击打开链接
让页面目标元素 “固定” 在浏览器窗口的顶部 stickUp+jQuery.pin 插件 使用 单页导航相关推荐
- ie自带css定位,CSS实现元素相对于浏览器窗口进行定位_css
文章简介:css实现相对浏览器窗口定位彻底研究. Web Developer / Designer 经常需要将一个元素"固定"在页面的某个位置.例如弹出窗口.漂浮广告位等--本文将 ...
- html页面添加遮罩层,在浏览器窗口上添加遮罩层的方法
如何在浏览器窗口上添加一个遮罩层 背景 在web2.0中,页面弹窗是一个很常见的交互方式,这样既可以避免不必要的页面跳转,也可以改进界面的布局和可交互性. 但是,浏览器原生的弹窗函数(alert, c ...
- html中页面缩放为何不居中,浏览器窗口放大缩小后页面内容居中解决方法
先说下简单的思路: 1.获得窗口的大小,高度,宽度. 2.要知道显示的图片(我这里用图片举例)的大小,宽,高.(我的图片显示设置为 宽:960,高600 ) 3.简单算法,获得的浏览器宽,高 减去 图 ...
- html监听页面关闭事件,JS针对浏览器窗口关闭事件的监听方法集锦
本文实例总结了JS针对浏览器窗口关闭事件的监听方法.分享给大家供大家参考,具体如下: 方式一:(适用于IE浏览器,而且刷新不提示,只在点击浏览器关闭按钮的时候提示) window.οnbefοreun ...
- html换浏览器div的位置固定不变,浏览器窗口更改时,HTML div不在适当的位置
这是一个没有bootstrap的基本解决方案:请记住,只有在必要时才使用绝对定位. 注意:如果您打算将登录文本输入推送到侧面,则此方法有效.然而,就UX而言,这可能是一个非常糟糕的主意. Login ...
- html文字自动铺满页面,body height:100%让页面容器元素铺满窗口
div 容器height:100% 我们想要让页面中的一个div容器能够实现自适应浏览器窗口的高度,这时候我们一般不希望牵扯js,简单的通过css的height:100%来实现高度的自适应. 这样是不 ...
- Stickup – 轻松实现元素固定效果的 jQuery 插件
粘贴是一个简单的 jQuery 插件,在页面滚动的时候固定一个元素到浏览器窗口的顶部,让其总是保持在视图中可见.这个插件作用于多页的网站,但是对于单页的布局有额外的功能.借助 CSS,还可以实现当前视 ...
- 得到目标元素距离视口的距离以及元素自身的宽度与高度(用于浮层位置的动态改变)...
以前所有操作都用弹窗弹个小层出来,然后最近整体换成了气泡风格,点哪里操作浮层就出现在哪里.我采用的是共用一个操作浮层,随元素位置而变换浮层的位置. 思路大概就是如下: 第一:确定浮层基于哪个元素定位 ...
- Edge 浏览器:隐藏功能揭秘与高效插件推荐
文章目录 一.前言 二.Edge 的各种奇淫巧计 2.1 开启 Edge 分屏功能 2.2 启动 Edge 浏览器后直接恢复上次关闭前的页面 2.3 解决 Edge 浏览器无法同步账号内容 2.4 开 ...
最新文章
- 嵌入式linux 升级,嵌入式Linux的OTA更新,基本原理和实现
- WordPress工作原理之程序文件执行顺序
- javascript 死循环
- 项目管理六大制约因素_知道了这7点,软件项目管理会变得更简单!
- centos设置java环境变量,CentOS设置环境变量
- 算法学习笔记(一):二分法及其实现
- C#的Socket-UDP通信
- javascript-按圆形排列DIV元素(三)实例---- 图片按椭圆形转动
- 【计算机就业-后端开发工程师】校招想去互联网公司担任后端开发工程师该怎么准备
- http 请求 超时时间设置
- 动态 | AI能看懂英文,阿里巴巴夺实体发现测评全球第一
- 用springMVC拦截器实现操作日志管理功能
- Arcgis如何使用三调数据统计土地三大类
- C#对接中国移动短信接口
- git diffmerge合并
- c语言java异或区别_C、C++、Java异或运算交换变量变量值的区别
- Spring Boot入门
- access9磅字体是多_字体大小(几号-几磅)
- linux系统MSL时间如何查,Linux和Windows系统修改MSL的值
- Python 数据可视化--Seaborn绘图总结1