57-003-1 bootstrap附加导航Affix实现页面的滚动监听
来源：互联网 发布：js 工作流设计器 编辑：程序博客网 时间：2024/06/06 01:09
附加导航指的是在网页侧边会有一个浮动的窗口，会侧着网页上下滚动而动态的跟随，此组件需要监听当前屏幕的位置，所以定义时需要设置data-spy=“affix”这么一个属性。
<head>
<title>Bootstrap 开发</title>
<meta charset="UTF-8">
<!-- bootstrap3.x 开始支持移动设备，所以可以加上其相应选项-->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- 导入bootstrap所需要的配置文件-->
<!-- bootstrap需要jquery的支持，导入jquery-->
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<!-- 导入bootstrap自己定出的js组件-->
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<!-- 导入bootstrap自定义的基础样式css-->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<style type="text/css">
.car{
width: 150px ;
border: solid 1px #ddd ;
}
</style>
</head>
<!-- 在body元素上面加上一个滚动监听，只要body元素有变动，即只要页面有动静，则会触发
,其关联的目标对象为myScrollSpy
-->
<body data-spy="scroll" data-target="#myScrollSpy">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="jumbotron"> <!-- 显示头部大块信息 -->
<h1>阳春公司</h1>
</div>
</div>
</div>
<div class="row">
<div class="col-md-9">
<h2 id="content-a">JAVA核心课程</h2>
<p>XXX</p>
<hr>
<h2 id="content-b">JAVA核心课程</h2>
<p>XXX</p>
<hr>
<h2 id="content-c">JAVA核心课程</h2>
<p>XXX</p>
<hr>
<h2 id="content-d">JAVA核心课程</h2>
<p>XXX</p>
<hr>
<h2 id="content-d">JAVA核心课程</h2>
<p>XXX</p>
<hr>
<h2 id="content-d">JAVA核心课程</h2>
<p>XXX</p>
<hr>
<h2 id="content-d">JAVA核心课程</h2>
<p>XXX</p>
<hr>
<h2 id="content-d">JAVA核心课程</h2>
<p>XXX</p>
</div>
<!-- 定义一个附加导航块区域 -->
<div id="myScrollSpy" class="col-md-3">
<div data-spy="affix" data-offset-top="10" id="mycar">
<!-- 定义一个显示面板 -->
<div class="panel panel-success car">
<!-- 定义面板头部区域 -->
<div class="panel-heading">
<h2 class="panel-title">购物车</h2>
</div>
<!-- 定义面板内容区域 -->
<div class="panel-body">
<img src="images/code.jpg" style="width:100%">
<h5 style="text-align:center">扫码一下</h5>
<button class="btn btn-info">点击</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
data-spy="scroll"，需要设置一个滚动监听
效果图：
0 0
- 57-003-1 bootstrap附加导航Affix实现页面的滚动监听
- bootstrap中jquery插件——affix附加导航、以及滚动监听功能的实现
- bootstrap affix附加导航
- Bootstrap 附加导航（Affix）插件
- Bootstrap 附加导航（Affix）插件
- 使用附加导航(affix)实现内容切换
- Bootstrap JS插件使用实例(10)-附加导航(affix)
- bootstrap源码学习之附加导航affix（二）
- Bootstrap基础25——附加导航affix
- 关于bootstrap中Affix放在顶部导航栏，出现位置偏移的问题
- bootstrap中使用Affix时，顶部导航栏出现位置偏移的问题
- BootStrap 附加导航组件
- Bootstrap附加导航插件
- bootstrap附加导航插件
- bootstrap 导航适配屏幕+滚动监听+JQuery删除块
- jq监听页面的滚动
- jQuery滚动监听，实现商城楼梯式导航、滚动监听根据滚动条所处的位置来自动更新导航项
- bootstrap滚动监听
- CentOS下搭建samba服务器与Windows进行共享服务
- UML实践详细经典教程----用例图、顺序图、状态图、类图、包图、协作图
- perl正则表达式（一）
- 【C++】：STL迭代器使用详解，很好很详细
- struts中数据处理
- 57-003-1 bootstrap附加导航Affix实现页面的滚动监听
- 时间格式化输出
- 数据库增删改查之增
- 涛哥的Cocos2d-js教程 之一 js绑定 读取csb文件
- Android 项目框架 使用MVP开发
- 关于联合体
- haroxy hdr
- Eclipse exits automatically exit code 127
- RHEL7软件包管理
