Home > Web Front-end > HTML Tutorial > Bootstrap learning js plug-in article scrolling monitoring_html/css_WEB-ITnose

Bootstrap learning js plug-in article scrolling monitoring_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:56:40
Original
1172 people have browsed it

1、滚动监听

 

案例

 

滚动监听插件可以根据滚动条的位置自动更新所对应的导航标记。Bootstrap中文网左侧就是一个滚动监听的例子。

代码段:

 

[html]  view plaincopy

  1.             
  2.             
  3.                 Toggle-navigation  
  4.                   
  5.                   
  6.                   
  7.               
  8.             Project Name  
  9.             
  
  •             
  •               
  •             
  •   
  •               
  •           
  • [html]  view plaincopy

    1.   
    2.            @fat  
    3.         

      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.

        
    4.         @mdo  
    5.         

      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.

        
    6.         one  
    7.         

      Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.

        
    8.         two  
    9.         

      In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch  1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

        
    10.         three  
    11. Ad leggings keytar, brunch id art party pain labore. Pitchfork yr enemi 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 back jean shorts, williamsburg hoodie minim who 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.

        
    12. Keytar twee blog, blame messenger bag marfa whatever delectus food truck. Sapient synth id assumes. Locavore sweet helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore Elite Placeat Before They Sold Out, Terry Richardson Proident Brunch Nesciunt Quis Cosby Sweater Pariatur Keffiyeh Ut Helvetica Artisan. Cardigan craft beer seat readymade outside. VHS chambray labor time venam. Anim mollit minimum commode ullamco thundercats.  
    13.   
    14.       
      

    Specific:

    Specific

    Specific data type

    If you want to create a specific keyword (preferably ) if you want data-spy="scroll" you need to create a key Thanksgiving snowflake snowflakes If you have a data-target, you can create a bootstrap.nav database ID class.

    <body data-spy="scroll" data-target=".navbar-example"> ... <div class="navbar-example"> <ul class="nav nav-tabs"> ... </ul> </div> ... </body>
    Copy after login
    JavaScript

    Free JavaScript Entertainment:

    $('body').scrollspy({ target: '.navbar-example' })
    Copy after login

    Appropriately spontaneous spellbinding scent

    Specify Easy-to-use snowflakes with snowflakes Enter the home ID, homecreate a DOM directory

    Refresh

    .scrollspy('refresh')

    If you want to refresh your scrolling, you will need to refresh your DOM页面元素时,都需要调用此法以,如下:

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

    Special

    Special data settings Free JavaScript If you have a data type, you can specify a type of data-offset, your data-offset=""

    名称 类型 默认值 描述
    offset number 10 Pixels to offset from top when calculating position of scroll.
    you

    事件类型 描述
    activate.bs.scrollspy 当滚动监听插件将某个元素置为active时,此事件被触发。

    $('#myScrollspy').on('activate.bs.scrollspy', function () { // do something… })
    Copy after login

    Related labels:
    source:php.cn
    Previous article:Self-study HTML5 Section 4 (detailed explanation of canvas)_html/css_WEB-ITnose Next article:CSS3:nth-child() pseudo-class selector_html/css_WEB-ITnose
    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Latest Articles by Author
    Latest Issues
    Related Topics
    More>
    Popular Recommendations
    Popular Tutorials
    More>
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template