2020-2-27今日总结——滚动监听&导航
利用Bootstrap 开发工具实现滚动监听
(此文只做学习路上的归纳分享总结用,如有侵权,请联系我删除)
使用滚动监听,比较特殊,要在body中设置scroll,以及触点。
很好理解,因为滚动是多对整个网页,而不是之前常用“container”类
<body data-spy="scroll" data-target="#myNav">
data-spy="affix",设置附加导航。
nav nav-pills nav-stacked,胶囊式导航,用来设置样式。
通过id进行触电绑定
<div class="col-xs-2">
<div data-spy="affix" data-offset-top="0" id="myNav">
<ul class="nav nav-pills nav-stacked">
<li>
<a href="#ch1">第一章</a>
</li>
<li>
<a href="#ch2">第二章</a>
</li>
<li>
<a href="#ch3">第三章</a>
</li>
<li>
<a href="#ch4">第四章</a>
</li>
</ul>
</div>
</div>
总代码:
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="X-UA-Compaitible" content="IE=edge">
<title>Daohang</title>
<link rel="stylesheet" href="css/bootstrap.css"> <!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body data-spy="scroll" data-target="#myNav">
<div class="container">
<h1>鱼C密传</h1>
<div class="row">
<div class="col-xs-10">
<h3 id="ch1">第一章:鱼C新纪元</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda commodi culpa cumque dolor eius, expedita facilis iure iusto laboriosam laudantium, minima molestias, nesciunt officiis perspiciatis praesentium quis quisquam ullam voluptatum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda commodi culpa cumque dolor eius, expedita facilis iure iusto laboriosam laudantium, minima molestias, nesciunt officiis perspiciatis praesentium quis quisquam ullam voluptatum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda commodi culpa cumque dolor eius, expedita facilis iure iusto laboriosam laudantium, minima molestias, nesciunt officiis perspiciatis praesentium quis quisquam ullam voluptatum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda commodi culpa cumque dolor eius, expedita facilis iure iusto laboriosam laudantium, minima molestias, nesciunt officiis perspiciatis praesentium quis quisquam ullam voluptatum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda commodi culpa cumque dolor eius, expedita facilis iure iusto laboriosam laudantium, minima molestias, nesciunt officiis perspiciatis praesentium quis quisquam ullam voluptatum.
</p>
<h3 id="ch2">第二章:程序猿的世界</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda commodi culpa cumque dolor eius, expedita facilis iure iusto laboriosam laudantium, minima molestias, nesciunt officiis perspiciatis praesentium quis quisquam ullam voluptatum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda commodi culpa cumque dolor eius, expedita facilis iure iusto laboriosam laudantium, minima molestias, nesciunt officiis perspiciatis praesentium quis quisquam ullam voluptatum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda commodi culpa cumque dolor eius, expedita facilis iure iusto laboriosam laudantium, minima molestias, nesciunt officiis perspiciatis praesentium quis quisquam ullam voluptatum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda commodi culpa cumque dolor eius, expedita facilis iure iusto laboriosam laudantium, minima molestias, nesciunt officiis perspiciatis praesentium quis quisquam ullam voluptatum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda commodi culpa cumque dolor eius, expedita facilis iure iusto laboriosam laudantium, minima molestias, nesciunt officiis perspiciatis praesentium quis quisquam ullam voluptatum.
</p>
<h3 id="ch3">第三章:初出茅庐的神兽转世</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda commodi culpa cumque dolor eius, expedita facilis iure iusto laboriosam laudantium, minima molestias, nesciunt officiis perspiciatis praesentium quis quisquam ullam voluptatum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda commodi culpa cumque dolor eius, expedita facilis iure iusto laboriosam laudantium, minima molestias, nesciunt officiis perspiciatis praesentium quis quisquam ullam voluptatum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda commodi culpa cumque dolor eius, expedita facilis iure iusto laboriosam laudantium, minima molestias, nesciunt officiis perspiciatis praesentium quis quisquam ullam voluptatum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda commodi culpa cumque dolor eius, expedita facilis iure iusto laboriosam laudantium, minima molestias, nesciunt officiis perspiciatis praesentium quis quisquam ullam voluptatum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda commodi culpa cumque dolor eius, expedita facilis iure iusto laboriosam laudantium, minima molestias, nesciunt officiis perspiciatis praesentium quis quisquam ullam voluptatum.
</p>
<h3 id="ch4">第四章:突破第三世界</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda commodi culpa cumque dolor eius, expedita facilis iure iusto laboriosam laudantium, minima molestias, nesciunt officiis perspiciatis praesentium quis quisquam ullam voluptatum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda commodi culpa cumque dolor eius, expedita facilis iure iusto laboriosam laudantium, minima molestias, nesciunt officiis perspiciatis praesentium quis quisquam ullam voluptatum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda commodi culpa cumque dolor eius, expedita facilis iure iusto laboriosam laudantium, minima molestias, nesciunt officiis perspiciatis praesentium quis quisquam ullam voluptatum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda commodi culpa cumque dolor eius, expedita facilis iure iusto laboriosam laudantium, minima molestias, nesciunt officiis perspiciatis praesentium quis quisquam ullam voluptatum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda commodi culpa cumque dolor eius, expedita facilis iure iusto laboriosam laudantium, minima molestias, nesciunt officiis perspiciatis praesentium quis quisquam ullam voluptatum.
</p>
</div>
<div class="col-xs-2">
<div data-spy="affix" data-offset-top="0" id="myNav">
<ul class="nav nav-pills nav-stacked">
<li>
<a href="#ch1">第一章</a>
</li>
<li>
<a href="#ch2">第二章</a>
</li>
<li>
<a href="#ch3">第三章</a>
</li>
<li>
<a href="#ch4">第四章</a>
</li> </ul> </div>
</div>
</div> </div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/> <script src="js/jquery-1.11.3.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
2020-2-27今日总结——滚动监听&导航的更多相关文章
- jq滚动监听-导航滚动
github地址:https://github.com/yutaogege/jquery.nav.js 代码: <!DOCTYPE html> <html> <head& ...
- 滚动监听(bootstrap)
1.05 腊八节 一直都想知道滚动监听是怎么做出来的,今天终于扒拉出来了,在使用的时候只要加上div定位就可以了... <head> <link rel="styles ...
- Bootstrap滚动监听
滚动监听(Scrollspy)插件,即自动更新导航插件,会根据滚动条的位置自动更新对应的导航目标.其基本的实现是随着您的滚动,基于滚动条的位置向导航栏添加 .active class. <!DO ...
- jQuery页面滚动监听事件及高级效果插件
jQuery页面滚动监听事件及高级效果插件 1. One Page scroll (只适用于上下焦点图)http://www.thepetedesign.com/demos/onepage_scrol ...
- Bootstrap 下拉菜单和滚动监听插件
一.下拉菜单 常规使用中,和组件方法一样,代码如下: //声明式用法 <div class="dropdown"> <button class="btn ...
- bootstrap的滚动监听
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...
- bootstap 滚动监听
---首先结合源代码介绍官网的说明 ---然后总结了使用滚动监听的几个步骤 ---最后给出一个简单的例子 ---关键的一点:整体有点零散和乱七八糟,辛苦你的思维和眼睛了,呵呵 ------------ ...
- Android对ScrollView滚动监听,实现美团、大众点评的购买悬浮效果
转帖请注明本文出自xiaanming的博客(http://blog.csdn.net/xiaanming/article/details/17761431),请尊重他人的辛勤劳动成果,谢谢! 我之前写 ...
- bootstrap-js(3)滚动监听
导航条实例 ScrollSpy插件根据滚动的位置自动更新导航条中相应的导航项. 拖动下面区域的滚动条,使其低于导航条的位置,注意观察active类的变化.下拉菜单中的子项也会跟着变为高亮状态. 1.调 ...
随机推荐
- git 远程托管
1.创建别名 git remote add orgin(别名) url 2.推入云端 git push 别名 master(分支) git push 别名 dev 3.克隆(默认只有master分支) ...
- 国产CPU 申威1621 异数OS基础组件理论性能测试报告
国产CPU 申威1621 异数OS基础组件理论性能测试报告 文章目录 国产CPU 申威1621 异数OS基础组件理论性能测试报告 前言 测试平台 测试项目 SW1621 异数OS 容器虚拟交换机模拟性 ...
- 一题多解——Strategic Game
点击打开题目 题目大意:给定一棵无根树,点亮其中某些点,使得这棵树的所有边都连接着一个以上的点亮的点 贪心中比较有挑战的题 由于如果点亮叶节点,就只会照亮一条边,但点亮它的父亲,就可以照亮除此边以外的 ...
- Mabitis
Mybatis 一.框架概念: Java框架,一个软件半成品,简单来说就是一个别人搭好的舞台,你来做表演,说白了Java框架就是封装好方便程序员操作的类,使项目的开发更简单,维护起来也更容易. 而My ...
- Python中的 if __name__ == '__main__' 是什么意思?
最近在看Python代码的时候,因为是Python初学者,看到这个if __name__ == '__main__' 的判断,并且下面还有代码语句,看了其他地方的说明,还是没搞明白是什么意思, 在看到 ...
- widows 10 下解决在npm install python 环境报错的问题
1.使用管理员打开cmd 2.安装 node-gyp; gyp是一种根据c++源代码编译的工具,node-gyp就是为node编译c++扩展的时候使用的编译工具. npm install -g nod ...
- xhsell关闭jupyter仍然运行的命令
nohup jupyter notebook & nohup 和 &都是linux的命令 1.& 当在前台运行某个作业时,终端被该作业占据:可以在命令后面加上& 实现后 ...
- mysql 1071错误,原因是Mysql的字段设置的太长了
mysql 1071错误,原因是Mysql的字段设置的太长了 mysql 1071错误经过查询才知道,是Mysql的字段设置的太长了,于是我把这两个字段的长度改了一下就好了. 建立索引时,数据库计算k ...
- 通信协议之Modbus协议(一)
Modbus通信协议: 简介:Modbus协议是应用于电子控制器上的一种通用语言 通过此协议,控制器相互之间,控制器经由网络(例如以太网) 和其他设备之间可以通信,他已经成为一种通用工业标准,有啦它 ...
- Python用WMI模块获取windowns系统信息
安装vmi https://pypi.org/project/WMI/#history 脚本如下: #!/usr/bin/env python #coding:utf- import wmi impo ...