1019日总结--滚动监听

滚动监听 首先定义了一个头部导航，头部导航早就学过了，正是因为早，所以现在写已经记不起什么了，在写滚动监听前，还得回顾早些时候的导航条怎么写。
导航条，记忆里是好几种东西混杂在一起写在一个列表里的，有下拉菜单，搜索框，按钮，还包括缩放切换功能。
哦。对了，这些功能是引用bootstrap框架使用的，在HTML中写完必要的架构后，调用bootstrap中已经定好的类，导航就是nav，导航条就是navbar.这样写看起来并不直观，接下来，我会参着代码一起复习
首先，我要定义一个导航

,在导航中插入要使用的类,navbar-inverse是颜色反转，定义一个黑色背景色。接着写一个导航头,导航头内部定义一个logo,通常是一个缩略图,然后是按钮，实现点击切换功能,data-target表示目标数据，通常用一个ID来绑定，这里是我要切换的列表的ID，data-toggle表示数据切换，collapse表示我们切换的功能是折叠功能。三个span定义了按钮的样式，icon-bar表示一条白线。然后是导航列表，navbar-nav 表示是导航条中的导航，navbar-collapse表示导航条的折叠功能，给ID“subNav”用来按钮绑定。列表项中可以定义form表单，下拉菜单，各种功能混合使用。下拉菜单中实用类dropdown和dropdown-menu.

<nav class="navbar navbar-inverse">    <div class="nav-header">        <div class="navbar-brand"><a>logo</a></div>        <button class="navbar-toggle" type="button" data-target="#subNav" data-toggle="collapse">        <span class="icon-bar"></span>        <span class="icon-bar"></span>        <span class="icon-bar"></span>        </button>    </div>    <div class="collapse navbar-collapse" id="subNav">                    <ul class="nav navbar-nav">                        <li><a href="" class="glyphicon glyphicon-home"> 首页</a></li>                        <li><a href="" class="glyphicon glyphicon-phone"> 电话</a></li>                        <li><a href="" class="glyphicon glyphicon-envelope" > 邮件</a></li>                        <li>                            <form action="" class="navbar-form">                                <input type="text" class="form-control"/>                                <button type="submit" class="btn btn-primary glyphicon glyphicon-search"> </button>                            </form>                        </li>                        <li><a href="" class="glyphicon glyphicon-question-sign"> Question</a></li>                        <li><a href=""></a></li>                    </ul>                    <ul class="nav navbar-nav navbar-right">                        <li class="dropdown">                            <a class="dropdown-toggle glyphicon glyphicon-music" data-toggle="dropdown"> Music<span class="caret"></span></a>                                <ul class="dropdown-menu">                                    <li><a href="">你的名字</a></li>                                    <li><a href="">你的微笑</a></li>                                    <li><a href="">你的眼睛</a></li>                                    <li><a href="">一眼万年</a></li>                                </ul>                        </li>                        <li><a href=""></a></li>                        <li><a href=""></a></li>                        <li><a href=""></a></li>                        <li><a href=""></a></li>                    </ul>                </div></nav>

到此为止，导航条的相关内容基本告一段落了，很显然我用了很大的篇幅去回顾，因为我是菜鸟，不去反复写，很难记住这些类。下面开始正题：滚动监听。