zoukankan      html  css  js  c++  java
  • bootstrap-scrollspy

    功能:用在导航栏上,用于滚动内容时动态对应导航标签

    插件:scrollspy.js

    要点:scrollspy用在导航栏、导航条上居多。body添加data-spy="scroll"的监听,在div class="js-navbar-scrollspy"包含其滚动显示的导航标签

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <!-- Latest compiled and minified CSS & JS -->
        <link rel="stylesheet" media="screen" href="../bootstrap-3.3.5-dist/css/bootstrap.min.css">
        <script src="../bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
        <script src="../extlib/jquery-1.11.1.min.js"></script>
        <!-- Local bootstrap CSS & JS -->
        <script src="../bootstrap-3.3.5-dist/js/collapse.js"></script>
        <script src="../bootstrap-3.3.5-dist/js/scrollspy.js"></script>
        <script src="../bootstrap-3.3.5-dist/js/transition.js"></script>
        <script src="../bootstrap-3.3.5-dist/js/dropdown.js"></script>
    </head>
    <body data-spy="scroll">
        <div class="container">
      
             <div class="row">
    <!-- navbar-fixed-top 与  navbar-fixed-button 内容差不多 -->
    <!-- 如果要使其随位置滚动而显示相应导航位置, 加上data-spy="scroll" -->
    <!-- 不能加ul 中加上div ,只能另起div 里包含ul li -->
             <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
            
             <div class="navbar-header">
                 <a class="navbar-brand" href="#">Hello</a>
                 <ul class="nav navbar-nav">
                     <li class="active">
                         <a href="#">Home</a>
                     </li>
                     <li>
                         <a href="#">Link</a>
                     </li>
                 </ul>
            </div>  
                   
              <div class="collapse navbar-collapse js-navbar-scrollspy">
                  <ul class="nav navbar-nav">
                      <li><a href="#fat">fat</a></li>
                      <li><a href="#mdo">mdo</a></li>
                   
                  </ul>
    
                   
              </div>
    
    
             </nav>
        
            </div>     
            
    
    
    
        
    
      <h2 id="fat">@fat</h2>
      <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
      <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
      <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
      <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
      <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
      <hr>
      <h2 id="mdo">@mdo</h2>
      <p>Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.</p>
      <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
      <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
      <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
      <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
      <hr>
    
    
    
    
    
    
    
    
            
                     
    
        </div>
    </body>
    </html>

    显示效果:

  • 相关阅读:
    二维码生成插件(jquery.qrcode.js)说明文档
    JS&PHP如何实现二维码的生成以及识别(代码)
    【干货】Chrome插件(扩展)开发全攻略 写在前面
    电脑连接并调试手机浏览器的网页
    php操作mysql数据库(增删改查)
    springBoot+springCloud学习笔记
    HttpClient远程调用接口
    fastjson List<> 转Json , Json 转List<>
    连接redis失败,关闭防火墙即可
    复习mybatis框架(一)----映射文件
  • 原文地址:https://www.cnblogs.com/hzijone/p/4857606.html
Copyright © 2011-2022 走看看