首页 > 代码库 > bootstrap滚动监听

bootstrap滚动监听

2024-07-04 06:44:11   223人阅读

Bootstrap ScrollSpy（滚动监听）是bootstrap插件提供的一个非常有趣的功能.当页面空间有限的时候我们可以利用它来显示我们想要显示的内容

官方说的想要利用此功能需要引入以下文件:

bootstrap/css/bootstrap.css
    jquery.1.9.1.js
    bootstrap.js
    bootstrap-dropdown.js
    bootstrap-scrollspy.js

不过经过测试 只需要前三个即可

以下是我测试的代码:

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
    <title>bootstrap滚动监听</title>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
    <script  src="bootstrap/js/jquery.1.9.1.js"></script>
    <script  src="bootstrap/js/bootstrap.js"></script>
    <!--<script  src="http://www.mamicode.com/bootstrap/js/bootstrap-dropdown.js"></script>
    <script  src="http://www.mamicode.com/bootstrap/js/bootstrap-scrollspy.js"></script>
    -->
    <style type="text/css">
    .scrollspy-example {
        height: 200px;
        overflow: auto;
        position: relative;
        }
</style>
</head>    

<body>
    <div class="span9 columns">
        <h2>我在测试滚动监听</h2>
        <p>接下来让我们看看滚动监听的神奇吧</p>
        <div class="navbar navbar-pills" id="navbarExample">
            <div class="navbar-inner">
                <div class="container" style="width:auto;">
                    <a href="#" class="brand">首页</a>
                    <ul class="nav">
                        <li class="active">
                            <a href="#java">Java</a>
                        </li>
                        <li class="">
                            <a href="#js">JS</a>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">DB<b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li class="">
                                    <a href="#mysql">MySQL</a>
                                </li>
                                <li class="">
                                    <a href="#MSSQL">MSSQL</a>
                                </li>
                                <li class="">
                                    <a href="#Oracle">Oracle</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div data-spy="scroll" data-target="#navbarExample" data-offset="50" class="scrollspy-example">
            <h4 id="java">Java</h4>
            <p>
                爪哇[1]是一种可以撰写跨平台应用软件的面向对象的程序设计语言，是由Sun Microsystems公司于1995年5月推出的Java程序设计语言和Java平台（即JavaEE, JavaME, JavaSE）的总称。Java自面世后就非常流行，发展迅速，对C++语言形成了有力冲击。Java 技术具有卓越的通用性、高效性、平台移植性和安全性，广泛应用于个人PC、数据中心、游戏控制台、科学超级计算机、移动电话和互联网，同时拥有全球最大的开发者专业社群。在全球云计算和移动互联网的产业环境下，Java更具备了显著优势和广阔前景。
            </p>
            <h4 id="js">Javascript</h4>
            <p>
                Javascript[1]是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证，由于网络速度相当缓慢，只有28.8kbps，验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript，提供了数据验证的基本功能。
            </p>
            <h4 id="mysql">MySQL </h4>
            <p>
                MySQL[1]是一个关系型数据库管理系统，由瑞典MySQL AB公司开发，目前属于Oracle公司。Mysql是最流行的关系型数据库管理系统，在WEB应用方面MySQL是最好的RDBMS(Relational Database Management System：关系数据库管理系统)应用软件之一。MySQL是一种关联数据库管理系统，关联数据库将数据保存在不同的表中，而不是将所有数据放在一个大仓库内，这样就增加了速度并提高了灵活性。MySQL所使用的SQL语言是用于访问数据库的最常用标准化语言。MySQL软件采用了双授权政策（本词条“授权政策”），它分为社区版和商业版，由于其体积小、速度快、总体拥有成本低，尤其是开放源码这一特点，一般中小型网站的开发都选择MySQL作为网站数据库。由于其社区版的性能卓越，搭配PHP和Apache可组成良好的开发环境。
            </p>
            <h4 id="MSSQL">MSSQL</h4>
            <p>
                MSSQL是指微软的SQLServer数据库服务器，它是一个数据库平台，提供数据库的从服务器到终端的完整的解决方案，其中数据库服务器部分，是一个数据库管理系统，用于建立、使用和维护数据库。SQL Server一开始并不是微软自己研发的产品，而是当时为了要和IBM竞争时，与Sybase合作所产生的，其最早的发展者是Sybase，同时微软也和Sybase合作过 SQL Server 4.2版本的研发，微软亦将SQL Server 4.2移植到Windows NT（当时为3.1版），在与Sybase终止合作关系后，自力开发出SQL Server 6.0版，往后的SQL Server即均由微软自行研发。</p>
            <h4 id="Oracle">Oracle</h4>
            <p>
                Oracle 即 甲骨文公司 。
                甲骨文公司，全称甲骨文股份有限公司(甲骨文软件系统有限公司)，是全球最大的企业软件公司，总部位于美国加利福尼亚州的红木滩。1989年正式进入中国市场。2013年，甲骨文已超越 IBM ，成为继 Microsoft 后全球第二大软件公司
            </p>
            </div>



    </div>
</body>
</html>
View Code

其中.scrollspy-example是为正文定义的样式.使正文内容局限的规定的空间中显示.这样大大节约了页面的空间.

最终效果如图:

其实个人觉得所谓的滚动监听其实就是通过锚节点以及js的结合实现的.


联系
我们