📌  相关文章
📜  Bootstrap-Scrollspy插件

📅  最后修改于: 2020-10-27 06:22:01             🧑  作者: Mango

 

滚动间谍(自动更新导航)插件可让您根据滚动位置定位页面的各个部分。在滚动的基本实现中，可以根据滚动位置将.active类添加到导航栏。

如果要单独包含此插件功能，则需要scrollspy.js 。另外，如“ Bootstrap插件概述”一章所述，您可以包含bootstrap.js或缩小的bootstrap.min.js 。

用法

您可以将scrollspy行为添加到顶部导航-

  • 通过数据属性-将data-spy =“ scroll”添加到要监视的元素(通常是主体)上。然后，将属性data-target与任何Bootstrap .nav组件的父元素的ID或类一起添加。为此，您必须在页面正文中包含与所监视的链接的ID匹配的元素。
...
   

      
    
         ...
      

   

   ...
  • 通过JavaScript-通过选择要监视的元素，然后调用.scrollspy()函数，可以使用JavaScript而不是使用数据属性来调用scrollspy-
$('body').scrollspy({ target: '.navbar-example' })

例

以下示例显示了通过数据属性使用scrollspy插件-

现场演示




   
iOS

    
   
iOS is a mobile operating system developed and distributed by Apple 
      Inc. Originally released in 2007 for the iPhone, iPod Touch, and Apple 
      TV. iOS is derived from OS X, with which it shares the Darwin 
      foundation. iOS is Apple's mobile version of the OS X operating system 
      used on Apple computers.

   
   
SVN

   
   
Apache Subversion which is often abbreviated as SVN, is a software 
      versioning and revision control system distributed under an open source 
      license. Subversion was created by CollabNet Inc. in 2000, but now it 
      is developed as a project of the Apache Software Foundation, and as 
      such is part of a rich community of developers and users.

   
   
jMeter

   
   
jMeter is an Open Source testing software. It is 100% pure Java 
      application for load and performance testing.

   
   
EJB

   
   
Enterprise Java Beans (EJB) is a development architecture for building 
      highly scalable and robust enterprise level applications to be deployed 
      on J2EE compliant Application Server such as JBOSS, Web Logic etc.

   
   
Spring

   
   
Spring framework is an open source Java platform that provides 
      comprehensive infrastructure support for developing robust Java 
      applications very easily and very rapidly.

   
   
Spring framework was initially written by Rod Johnson and was first 
      released under the Apache 2.0 license in June 2003.

选件

可以通过数据属性或JavaScript传递选项。下表列出了选项-

Option Name Type/Default Value Data attribute name Description
offset number Default: 10 data-offset Pixels to offset from top when calculating position of scroll.

方法

.scrollspy(‘refresh’) -通过JavaScript方法调用scrollspy时，您需要调用.refresh方法来更新DOM。如果DOM的任何元素已更改，即添加或删除了某些元素，这将很有帮助。以下是使用此方法的语法。

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

例

以下示例演示了.scrollspy(‘refresh’)方法的使用-

现场演示




   
   

      
iOS
         × Remove this section
      

      
      
iOS is a mobile operating system developed and distributed by 
         Apple Inc. Originally released in 2007 for the iPhone, iPod Touch, and 
         Apple TV. iOS is derived from OS X, with which it shares the Darwin 
         foundation. iOS is Apple's mobile version of the OS X operating system
         used on Apple computers.

   

   
   

      
SVN

      
Apache Subversion which is often abbreviated as SVN, is a software 
         versioning and revision control system distributed under an open source 
         license. Subversion was created by CollabNet Inc. in 2000, but 
         now it is developed as a project of the Apache Software Foundation, 
         and as such is part of a rich community of developers and users.

   

   
   

      
jMeter
         × Remove this section
      

      
      
jMeter is an Open Source testing software. It is 100% pure Java 
         application for load and performance testing.

   

   
   

      
EJB

      
      
Enterprise Java Beans (EJB) is a development architecture for 
         building highly scalable and robust enterprise level applications 
         to be deployed on J2EE compliant Application Server such as 
         JBOSS, Web Logic etc.

   

    
   

      
Spring

      
      
Spring framework is an open source Java platform that provides 
         comprehensive infrastructure support for developing robust Java 
         applications very easily and very rapidly.

      
      
Spring framework was initially written by Rod Johnson and was first 
         released under the Apache 2.0 license in June 2003.

大事记

下表列出了可与scrollspy一起使用的事件。此事件可用于挂接到函数。

Event Description Example
activate.bs.scrollspy This event fires whenever a new item becomes activated by the scrollspy. 
$('#myScrollspy').on('activate.bs.scrollspy', function () {
   // do something…
})

例

以下示例演示了activate.bs.scrollspy事件的使用-

现场演示

      
      
      
      
   
      
   
   
   
      

         
         
         

            

            
               
Subject 1 
                  Remove Subject ×
               

            
               
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                  sed do eiusmod tempor incididunt ut labore et dolore magna
                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                  ullamco laboris nisi ut aliquip ex ea commodo consequat.

            

                
            

         
            

               
Subject 2 
                  Remove Subject ×
               

            
               
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                  sed do eiusmod tempor incididunt ut labore et dolore magna
                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                  ullamco laboris nisi ut aliquip ex ea commodo consequat.

            

                
            

         
            

               
Subject 3 
                   Remove Subject ×
               

            
               
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                  sed do eiusmod tempor incididunt ut labore et dolore magna
                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                  ullamco laboris nisi ut aliquip ex ea commodo consequat.
<
            

                
            

            
            

               
Subject 3.1
                   Remove Subject ×
               

               
               
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                  sed do eiusmod tempor incididunt ut labore et dolore magna
                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                  ullamco laboris nisi ut aliquip ex ea commodo consequat.

            

            
            

               
Subject 3.2
                   Remove Subject ×
               

               
               
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                  sed do eiusmod tempor incididunt ut labore et dolore magna
                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                  ullamco laboris nisi ut aliquip ex ea commodo consequat.

            

            
            

               
Subject 3.3 
                  Remove Subject ×
               

               
               
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                  sed do eiusmod tempor incididunt ut labore et dolore magna
                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                  ullamco laboris nisi ut aliquip ex ea commodo consequat.

            

                
            

            
            

               
Subject 4 
                  Remove Subject ×
               

               
               
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                  sed do eiusmod tempor incididunt ut labore et dolore magna
                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                  ullamco laboris nisi ut aliquip ex ea commodo consequat.