zoukankan      html  css  js  c++  java
  • 滚动监听

    滚动监听代码如下:

    <head>
    <link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div style="left:500px; position:relative; 300px">//这里是我自己加上的 用来定位的
    <nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">
        <div class="container-fluid"> 
            <div class="navbar-header">
                <button class="navbar-toggle" type="button" data-toggle="collapse" 
                        data-target=".bs-js-navbar-scrollspy">
                    <span class="sr-only">切换导航</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">教程名称</a>
            </div>
            <div class="collapse navbar-collapse bs-js-navbar-scrollspy">
                <ul class="nav navbar-nav">
                    <li><a href="#ios">iOS</a></li>
                    <li><a href="#svn">SVN</a></li>
                    <li class="dropdown">
                        <a href="#" id="navbarDrop1" class="dropdown-toggle" 
                           data-toggle="dropdown">Java
                            <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu" role="menu" 
                            aria-labelledby="navbarDrop1">
                            <li><a href="#jmeter" tabindex="-1">jmeter</a></li>
                            <li><a href="#ejb" tabindex="-1">ejb</a></li>
                            <li class="divider"></li>
                            <li><a href="#spring" tabindex="-1">spring</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div> 
    </nav> </div>
    <div data-spy="scroll" data-target="#navbar-example" data-offset="0" 
         style="height:200px;overflow:auto; position: relative;">
        <h4 id="ios">iOS</h4>
        <p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple 
            TV。iOS 派生自 OS X,它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上,iOS 是苹果的移动版本。
        </p>
        <h4 id="svn">SVN</h4>
        <p>Apache Subversion,通常缩写为 SVN,是一款开源的版本控制系统软件。Subversion 由 CollabNet 公司在 2000 年创建。但是现在它已经发展为 Apache Software Foundation 的一个项目,因此拥有丰富的开发人员和用户社区。
        </p>
        <h4 id="jmeter">jMeter</h4>
        <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序,用于负载和性能测试。
        </p>
        <h4 id="ejb">EJB</h4>
        <p>Enterprise Java Beans(EJB)是一个创建高度可扩展性和强大企业级应用程序的开发架构,部署在兼容应用程序服务器(比如 JBOSS、Web Logic 等)的 J2EE 上。
        </p>
        <h4 id="spring">Spring</h4>
        <p>Spring 框架是一个开源的 Java 平台,为快速开发功能强大的 Java 应用程序提供了完备的基础设施支持。
        </p>
        <p>Spring 框架最初是由 Rod Johnson 编写的,在 2003 年 6 月首次发布于 Apache 2.0 许可证下。
        </p>
    </div>
    
    </body>
  • 相关阅读:
    linux软件安装方式
    docker 安装 jenkins touch: cannot touch ‘/var/jenkins_home/copy_reference_file.log’: Permission denied Can not write to /var/jenkins_home/copy_reference_file.log. Wrong volume permissions?
    [ERR] Node goodsleep.vip:6379 is not empty. Either the node already knows other nodes (check with CLUSTER NODES) or contains some key in database 0.
    Linux 常用命令 服务器间scp 用户 export 创建文件、软连接
    redis 安装 集群 主从 哨兵 docker
    WPF密码框中禁止复制、粘贴
    Application 统计在线人数
    【转义字符】HTML 字符实体&lt; &gt: &amp;等
    SQL语句统计每天的数据
    正则表达式计算代码数
  • 原文地址:https://www.cnblogs.com/axj1993/p/6265606.html
Copyright © 2011-2022 走看看