bootstrap附加导航插件
来源:互联网 发布:淘宝全网举报根本没用 编辑:程序博客网 时间:2024/06/06 02:04
一.附加导航
附加导航即粘贴在屏幕某处实现锚点功能。
ul.nav-pills {
width: 200px;
}
ul.nav-pills.affix{
top: 30px;
}
//JavaScript 代替data-spy="affix" data-offset-top="125"
$('#myAffix').affix({
offset: {
top: 150
}
})
附加导航即粘贴在屏幕某处实现锚点功能。
//基本实例。
<body data-spy="scroll" data-target="#myScrollspy"><div class="container"> <div class="jumbotron" style="height:150px"> <h1>Bootstrap Affix</h1> </div> <div class="row"> <div class="col-xs-3" id="myScrollspy"> <ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="150"> <li class="active"><a href="#section-1">第一部分 </a></li> <li><a href="#section-2">第二部分</a></li> <li><a href="#section-3">第三部分</a></li> <li><a href="#section-4">第四部分</a></li> <li><a href="#section-4">第五部分</a></li> </ul> </div> <div class="col-xs-9"> <h2 id="section-1">第一部分</h2> <p>...</p> <h2 id="section-2">第二部分</h2> <p>...</p> <h2 id="section-3">第三部分</h2> <p>...</p> <h2 id="section-4">第四部分</h2> <p>...</p> <h2 id="section-5">第四部分</h2> <p>...</p> </div> </div></div>//导航的CSS 部分
ul.nav-pills {
width: 200px;
}
ul.nav-pills.affix{
top: 30px;
}
//JavaScript 代替data-spy="affix" data-offset-top="125"
$('#myAffix').affix({
offset: {
top: 150
}
})
我们默认使用的是top,当然也可以默认居底bottom。这个定位方式是直接通过CSS
定位的。
//设置成bottom
ul.nav-tabs.affix-bottom{
bottom : 30px;
}
//设置成bottom
$('#myAffix').affix({
offset: {
bottom: 150
}
})
//其他雷同
$('#myAffix').on('affixed-top.bs.affix', function () {
alert('触发!');
});
阅读全文
0 0
- Bootstrap附加导航插件
- bootstrap附加导航插件
- Bootstrap 附加导航(Affix)插件
- Bootstrap 附加导航(Affix)插件
- bootstrap affix附加导航
- BootStrap 附加导航组件
- Bootstrap JS插件使用实例(10)-附加导航(affix)
- bootstrap中jquery插件——affix附加导航、以及滚动监听功能的实现
- bootstrap源码学习之附加导航affix(二)
- Bootstrap基础25——附加导航affix
- 通过bootstrap插件制作响应式导航!
- bootstrap导航插件wizard--源码demo
- 57-003-1 bootstrap附加导航Affix实现页面的滚动监听
- Bootstrap 导航
- bootstrap导航
- bootstrap导航
- bootstrap--导航
- Bootstrap 导航
- 【STM32】 keil软件介绍--工具栏
- (13)回顾会议
- 让电脑自动开机、关机以及取消开机密码
- JavaScript实战-基于数组的级联列表实现
- csu 1567 Reverse Rot
- bootstrap附加导航插件
- CSS 中权值使用(笔记)
- python select 骚操作
- GeoWave安装部署实践
- Mysql权限控制
- vscode相关配置指南 (不定期更新)
- merge two list
- 如何招聘一个优秀的Scrum Master(转载)
- 数据溢出与类型提升