滚动监听
bootstrap 的scrollspy,需要借助.nav样式,活动的部分是加
.active类。本身导航没有position:fixed,需要自己加入
滚动监听。只有滚动和监听,只有默认锚点链接做调转,若想改变,只有自己写跳转方法--
阻止a标签跳转(不直接用锚点链接做跳转);而是用animate(scrollTop)跳转,scrollTop可以设置距顶端的距离.animate({scrollTop: });
html
<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的更多相关文章

  1. Bootstrap学习js插件篇之滚动监听

    1.滚动监听 案例 滚动监听插件可以根据滚动条的位置自动更新所对应的导航标记.Bootstrap中文网左侧就是一个滚动监听的例子. 代码段: <nav id="navbar-examp ...

  2. bootstrap-js(3)滚动监听

    导航条实例 ScrollSpy插件根据滚动的位置自动更新导航条中相应的导航项. 拖动下面区域的滚动条,使其低于导航条的位置,注意观察active类的变化.下拉菜单中的子项也会跟着变为高亮状态. 1.调 ...

  3. Bootstrap滚动监听(Scrollspy)插件

    Bootstrap滚动监听(Scrollspy)插件,即自动更新导航插件,会根据滚动条的位置自动更新对应的导航目标

  4. bootstrap源码之滚动监听组件scrollspy.js详解

    其实滚动监听使用的情况还是很多的,比如导航居于右侧,当主题内容滚动某一块的时候,右侧导航对应的要高亮. 实现功能 1.当滚动区域内设置的hashkey距离顶点到有效位置时,就关联设置其导航上的指定项 ...

  5. Bootstrap滚动监听

    滚动监听(Scrollspy)插件,即自动更新导航插件,会根据滚动条的位置自动更新对应的导航目标.其基本的实现是随着您的滚动,基于滚动条的位置向导航栏添加 .active class. <!DO ...

  6. Bootstrap 下拉菜单和滚动监听插件

    一.下拉菜单 常规使用中,和组件方法一样,代码如下: //声明式用法 <div class="dropdown"> <button class="btn ...

  7. bootstrap的滚动监听

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...

  8. Bootstrap -- 插件: 模态框、滚动监听、标签页

    Bootstrap -- 插件: 模态框.滚动监听.标签页 1. 模态框(Modal): 覆盖在父窗体上的子窗体. 使用模态框: <!DOCTYPE html> <html> ...

  9. Bootstrap-Plugin:滚动监听(Scrollspy)插件

    ylbtech-Bootstrap-Plugin:滚动监听(Scrollspy)插件 1.返回顶部 1. Bootstrap 滚动监听(Scrollspy)插件 滚动监听(Scrollspy)插件,即 ...

随机推荐

  1. JS JSOP跨域请求实例详解

    JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题.这篇文章主要介绍了JS JSOP跨域请求实例详解的相关资料,需要的朋友可以参考下 ...

  2. xml布局内容总结(三)--Android

    关于xml中经经常使用到边框及边框效果,在此进行一下总结. 3.border(边框及边框效果) (1)直角边框线 <LinearLayout         android:layout_wid ...

  3. [获取行数]php读取大文件提供性能的方法,PHP的stream_get_line函数读取大文件获取文件的行数的方...

    背景: 下面是获取文件的行数的方法: 一个文件如果知道有几行的话,就可以控制获取一定的行数的数据,然后放入数据库.这样不管的读取大文件的性能,还是写入数据库的性能,都能得到很大的提高了. 下面是获取文 ...

  4. Atitit.angular.js 使用最佳实践 原理与常见问题解决与列表显示案例 attilax总结

    Atitit.angular.js 使用最佳实践 原理与常见问题解决与列表显示案例 attilax总结 1. 本文范围 1 2. Angular的优点 1 2.1. 双向数据绑定 1 2.2. dsl ...

  5. Xcode 警告信息处理:Format string is not a string literal (potentially insecure)

    转自:http://www.oschina.net/question/54100_33881 NSObject *obj = @"A string or other object." ...

  6. ThinkPHP分页实例

    ThinkPHP分页实例 (2014-09-20 15:34:36)   很多人初学thinkphp时,不太熟悉thinkphp的分页使用方法,现在将自己整理的分页方法分享下,有需要的朋友可以看看. ...

  7. 李洪强和你一起学习前端之(7)定位盒子 css可见性 滑动门案例

    今天是2017年3月23日 1 复习昨天知识 1.1浮动 Float:left | right 特点: ->浮动的元素不占位置(脱标) ->可以将行内元素转化为行内块元素 ->块级元 ...

  8. 架设HmailServer邮件服务器以及webmail

    参考:http://www.it0355.com/a/201207/31/a9275.htm 在安裝Hmailserver前先安裝Apache.php.mysql,如果你想懶點直接到http://ww ...

  9. emblog后台拿shell

    emlog版本:5.3.1 先本地弄好shell 新建一个文件夹,里面放shell,shell名称和文件名要一致.压缩为zip 然后在安装插件处上传. 成功后的路径content/plugins/te ...

  10. COCOS2D-HTML5 开发之二】cocos2d-html5项目定义成员,局部变量,函数笔记随笔

    本站文章均为李华明Himi原创,转载务必在明显处注明:(作者新浪微博:@李华明Himi) 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/cocos2d- ...