2020-2-27今日总结——滚动监听&导航

拈花ヽ惹草 提交于 2020-02-27 18:11:15

利用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>

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!