真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

如何使用bootstrap滾動監(jiān)控器

今天就跟大家聊聊有關(guān)如何使用bootstrap滾動監(jiān)控器，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

昂昂溪網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),昂昂溪網(wǎng)站設(shè)計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為昂昂溪上千多家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站制作要多少錢，請找那個售后服務(wù)好的昂昂溪做網(wǎng)站的公司定做！

滾動監(jiān)控器

1、當(dāng)用戶鼠標(biāo)滾動時，滾動條的位置會自動更新導(dǎo)航條中相應(yīng)的導(dǎo)航項。
這是因為該插件可以自動檢測滾動條到達哪個位置，然后在需要高亮的菜單元素上加了一個“active”樣式。

滾動監(jiān)控器–滾動監(jiān)控器的設(shè)計

第一步：使用滾動監(jiān)控器，首要的條件是在頁面中加載對應(yīng)的插件。在這里你可以加載合并好的bootstrap.js或者其獨立的插件文件scrollspy.js。這里以加載合并好的js為例：

第二步：設(shè)計一個帶有下拉菜單的導(dǎo)航條。分別為導(dǎo)航條和下拉菜單項定義一個錨點鏈接，錨點分別為“#blog”,“html”,“#css”,“#sass”,“#js”,“php”,“#about”。同時為導(dǎo)航條定義一個id值“navbar-menu”（id名稱可自由定義），方便滾動監(jiān)控。

如何使用bootstrap滾動監(jiān)控器

第三步：設(shè)計監(jiān)控對象。這里將監(jiān)控對象內(nèi)容都放置在一個div名為scrollspy（這個類名可自由定義）的容器中，其中放了多個子內(nèi)容框。每個子內(nèi)容框有一個標(biāo)題，而且每個標(biāo)題的ID值與導(dǎo)航菜單項中的錨點鏈接名相對應(yīng)，并且注意加入“data-target=”#navbar-menu””屬性（這個屬性值要與前面的nav標(biāo)簽的id名稱保持一致）


  Blog
  …
  Html
  …
  CSS
  …
  Sass
  …
  JavaScript
  …
  …
  PHP
  …
  …
  About
  …
  …

第四步：為監(jiān)控對象定義樣式，設(shè)置容器scrollspy大?。ㄔO(shè)置高度目的是為了產(chǎn)生垂直滾動條）。

.scrollspy{
  height:500px;
  font-size:20px;
  overflow:auto;
}

滾動監(jiān)控器–聲明屬性觸發(fā)滾動監(jiān)控

為監(jiān)控對象設(shè)置被監(jiān)控的data屬性：data-spy=”scroll”，指定監(jiān)控的導(dǎo)航條：data-target=”#navbar-menu”。同時定義監(jiān)控過程中滾動條偏移位置data-offset=”60”。代碼如下：

…

滾動監(jiān)控器–在body中加監(jiān)控
還可以直接在body上進行滾動條監(jiān)控，此時要將滾動監(jiān)控器移到body上，而且導(dǎo)航nav一定要在body內(nèi)部。

Blog

…

導(dǎo)航條必須設(shè)置為頂部固定樣式（navbar-fixed-top）

滾動監(jiān)控器–JavaScript方法觸發(fā)滾動監(jiān)控器

在Bootstrap框架中，使用JavaScript方法觸發(fā)滾動監(jiān)控器相對來說較為簡單，只需要指定兩個容器的名稱即可


 …



 …

JavaScript觸發(fā)可以這樣寫：

$(function(){
  $("#scrollspy").scrollspy({
    target: "#navbar-menu"
  });
})

Bootstrap的滾動監(jiān)控還提供了一個方法scrollspy(“refresh”)。當(dāng)滾動監(jiān)控所作用的DOM有增加或刪除頁面元素的操作時，需要調(diào)用下面的refresh方法：

$(function(){
  $("[data-spy='scroll']").each(function(){
    var $spy=$(this).scrollspy("refresh");
  })
})

注意的是，這種refresh方法只對聲明式用法有效。另外滾動監(jiān)控除了options參數(shù)“target”之外，還提供了一個offset參數(shù)，此參數(shù)默認值為10。默認情況下，滾動內(nèi)容距離滾動容器10px以內(nèi)的話，就高一片面前顯示所對應(yīng)的菜單項。

滾動監(jiān)實例：







 

  
  
      

    

    
          
      
      
      
     

    
     導(dǎo)航標(biāo)題
    

     
    

     
     
      @fat
      @mdo

      
       Dropdown 

       
        one
        two

         
        
        three

       
      

     
     
    

   

    

  滾動監(jiān)對象
  
   @fat
   Ad leggings keytar,
   @mdo
   Veniam marfa mustache skateboard
   one
   Occaecat commodo aliqua delectus.
   two
   In incididunt echo park, officia deserunt mcsweeney's 
   three
   Ad leggings keytar
   Keytar twee blog