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>

    显示效果:

  • 相关阅读:
    Centos7 yum 安装 oracle-rdbms-server-11gR2-pre
    R语言 小程序
    Hadoop! | 大数据百科 | 数据观 | 中国大数据产业观察_大数据门户
    【R】如何确定最适合数据集的机器学习算法
    R语言 recommenderlab 包
    R语言 推荐算法 recommenderlab包
    R语言进行数据预处理wranging
    统计学 nested_design 嵌套设计
    [LeetCode] 160. 相交链表
    [LeetCode] 155. 最小栈
  • 原文地址:https://www.cnblogs.com/hzijone/p/4857606.html
Copyright © 2011-2022 走看看