滚动监听: bootstrap 的scrollspy
<div id="menu">
<div id="nav-awu">
<ul class="nav">
<!--<li><a href="#cooperation">潮童</a></li>-->
<li><a href="#downJacket" onclick="return a_stop('#downJacket');" >羽绒</a></li>
<li><a href="#cotton" onclick="return a_stop('#cotton');" >时尚棉服</a></li>
<li><a href="#sweater" onclick="return a_stop('#sweater');" >毛衣</a></li>
<li><a href="#trousers" onclick="return a_stop('#trousers');" >裤装</a></li>
<li><a href="#shoes" onclick="return a_stop('#shoes');" >鞋履</a></li>
</ul>
</div>
</div>
css 重写样式
#menu ul.nav,
#menu ul.nav:hover{border: none; background: none;height: 50px; line-height: 50px;margin:; padding:;} #menu ul.nav-tab,
#menu ul.nav-tab:hover{border: none; background: none;height:50px; line-height: 50px;margin:; padding:}
#menu ul li {
display: inline-block;
width: 16%;
margin: 10px 2% 0;
height: 30px;
/*margin: 0;*/
padding:;
border: none;
text-align: center;
} .nav > li > a {
/*position: relative;*/
display: block;
width: auto;
padding:; //默认情况下 padding有数值,需要设为0
}
#menu ul li a {
margin:;padding:;
height: 28px;
line-height: 28px;
font-size: 12px;
text-decoration: none;
color: #fff;
} /*#menu ul li a:hover{ font-size:12px; text-decoration: none; color: #fff; border-bottom:2px solid #fefb00; }*/
//active类
#menu ul li.active > a,
#menu ul li.active > a:focus{
margin:;padding:;
height: 28px;
line-height: 28px;
border:none;
border-bottom: 2px solid #fefb00;
font-size: 12px;
text-decoration: none;
color: #fff;
background: none;
/*text-decoration: dashed;*/
}
.nav > li > a:hover, .nav > li > a:focus {
text-decoration: none;
background: none;
}
js
$(function () {
//导航监控
var fixWidth = ($(window).width() - $("#menu").width()) / 2;
var scroHeight = $("#menu").offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() >= scroHeight) {
$("#menu").css({
"width": $("#banner").width(),
"position": "fixed",
"top": 0,
"left": fixWidth
});
$("#box").css("margin-top","50px");
}
else {
$("#menu").css({
"position": "relative",
"top": 0,
"left": 0
});
$("#box").css("margin-top","0");
}
});
$('body').scrollspy({target: '#menu', offset: 50});//offset是根据 多少的偏移的距离 来做监听
}); function a_stop(attr){
var isRel = $("#menu").css("position") == "relative";
var fix = 50;
$("html,body").animate({scrollTop:$(attr).offset().top - fix},10);
return false; //必须要
}
1.阻止a标签跳转
参考 http://blog.csdn.net/awe5566/article/details/22583699
href="#downJacket" 锚点链接 必须写;
但又想阻止a标签跳转(阻止默认的滚动监听,好自己设置scrollTop),
onclick="return fales"
<a href="#downJacket" onclick="return a_stop('#downJacket');" >羽绒</a>
2.自己写跳转方法 :用animate({scrollTop:number) 做跳转
scrollTop
offset是根据 多少的偏移的距离 来做监听,offset一般和导航高度有关
滚动监听: bootstrap 的scrollspy的更多相关文章
- Bootstrap学习js插件篇之滚动监听
1.滚动监听 案例 滚动监听插件可以根据滚动条的位置自动更新所对应的导航标记.Bootstrap中文网左侧就是一个滚动监听的例子. 代码段: <nav id="navbar-examp ...
- bootstrap-js(3)滚动监听
导航条实例 ScrollSpy插件根据滚动的位置自动更新导航条中相应的导航项. 拖动下面区域的滚动条,使其低于导航条的位置,注意观察active类的变化.下拉菜单中的子项也会跟着变为高亮状态. 1.调 ...
- Bootstrap滚动监听(Scrollspy)插件
Bootstrap滚动监听(Scrollspy)插件,即自动更新导航插件,会根据滚动条的位置自动更新对应的导航目标
- bootstrap源码之滚动监听组件scrollspy.js详解
其实滚动监听使用的情况还是很多的,比如导航居于右侧,当主题内容滚动某一块的时候,右侧导航对应的要高亮. 实现功能 1.当滚动区域内设置的hashkey距离顶点到有效位置时,就关联设置其导航上的指定项 ...
- Bootstrap滚动监听
滚动监听(Scrollspy)插件,即自动更新导航插件,会根据滚动条的位置自动更新对应的导航目标.其基本的实现是随着您的滚动,基于滚动条的位置向导航栏添加 .active class. <!DO ...
- Bootstrap 下拉菜单和滚动监听插件
一.下拉菜单 常规使用中,和组件方法一样,代码如下: //声明式用法 <div class="dropdown"> <button class="btn ...
- bootstrap的滚动监听
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...
- Bootstrap -- 插件: 模态框、滚动监听、标签页
Bootstrap -- 插件: 模态框.滚动监听.标签页 1. 模态框(Modal): 覆盖在父窗体上的子窗体. 使用模态框: <!DOCTYPE html> <html> ...
- Bootstrap-Plugin:滚动监听(Scrollspy)插件
ylbtech-Bootstrap-Plugin:滚动监听(Scrollspy)插件 1.返回顶部 1. Bootstrap 滚动监听(Scrollspy)插件 滚动监听(Scrollspy)插件,即 ...
随机推荐
- JS JSOP跨域请求实例详解
JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题.这篇文章主要介绍了JS JSOP跨域请求实例详解的相关资料,需要的朋友可以参考下 ...
- xml布局内容总结(三)--Android
关于xml中经经常使用到边框及边框效果,在此进行一下总结. 3.border(边框及边框效果) (1)直角边框线 <LinearLayout android:layout_wid ...
- [获取行数]php读取大文件提供性能的方法,PHP的stream_get_line函数读取大文件获取文件的行数的方...
背景: 下面是获取文件的行数的方法: 一个文件如果知道有几行的话,就可以控制获取一定的行数的数据,然后放入数据库.这样不管的读取大文件的性能,还是写入数据库的性能,都能得到很大的提高了. 下面是获取文 ...
- Atitit.angular.js 使用最佳实践 原理与常见问题解决与列表显示案例 attilax总结
Atitit.angular.js 使用最佳实践 原理与常见问题解决与列表显示案例 attilax总结 1. 本文范围 1 2. Angular的优点 1 2.1. 双向数据绑定 1 2.2. dsl ...
- Xcode 警告信息处理:Format string is not a string literal (potentially insecure)
转自:http://www.oschina.net/question/54100_33881 NSObject *obj = @"A string or other object." ...
- ThinkPHP分页实例
ThinkPHP分页实例 (2014-09-20 15:34:36) 很多人初学thinkphp时,不太熟悉thinkphp的分页使用方法,现在将自己整理的分页方法分享下,有需要的朋友可以看看. ...
- 李洪强和你一起学习前端之(7)定位盒子 css可见性 滑动门案例
今天是2017年3月23日 1 复习昨天知识 1.1浮动 Float:left | right 特点: ->浮动的元素不占位置(脱标) ->可以将行内元素转化为行内块元素 ->块级元 ...
- 架设HmailServer邮件服务器以及webmail
参考:http://www.it0355.com/a/201207/31/a9275.htm 在安裝Hmailserver前先安裝Apache.php.mysql,如果你想懶點直接到http://ww ...
- emblog后台拿shell
emlog版本:5.3.1 先本地弄好shell 新建一个文件夹,里面放shell,shell名称和文件名要一致.压缩为zip 然后在安装插件处上传. 成功后的路径content/plugins/te ...
- COCOS2D-HTML5 开发之二】cocos2d-html5项目定义成员,局部变量,函数笔记随笔
本站文章均为李华明Himi原创,转载务必在明显处注明:(作者新浪微博:@李华明Himi) 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/cocos2d- ...