Source

Scrollspy

Ṣe imudojuiwọn lilọ kiri Bootstrap ni adaṣe tabi ṣe atokọ awọn paati ẹgbẹ ti o da lori ipo yi lọ lati tọka iru ọna asopọ ti n ṣiṣẹ lọwọlọwọ ni wiwo wiwo.

Bawo ni o ṣe n ṣiṣẹ

Scrollspy ni awọn ibeere diẹ lati ṣiṣẹ daradara:

  • Ti o ba n kọ JavaScript wa lati orisun, o niloutil.js .
  • O gbọdọ lo lori paati Bootstrap nav tabi ẹgbẹ atokọ .
  • Scrollspy nbeere position: relative;lori eroja ti o ṣe amí lori, nigbagbogbo <body>.
  • Nigbati o ba ṣe amí lori awọn eroja miiran yatọ si <body>, rii daju pe o heightṣeto ati overflow-y: scroll;lo.
  • Awọn ìdákọró ( <a>) ni a nilo ati pe o gbọdọ tọka si nkan kan pẹlu iyẹn id.

Nigbati imuse aṣeyọri, nav rẹ tabi ẹgbẹ atokọ yoo ṣe imudojuiwọn ni ibamu, gbigbe .activekilasi lati ohun kan si ekeji ti o da lori awọn ibi-afẹde ti o somọ wọn.

Apeere ni navbar

Yi lọ si agbegbe ni isalẹ navbar ki o wo iyipada kilasi ti nṣiṣe lọwọ. Awọn nkan isọ silẹ yoo jẹ afihan bi daradara.

@sanra

Ad leggings keytar, brunch id art party dolor labour. Pitchfork yr enim lo-fi kí wọn tó ta qui. Tumblr oko-to-tabili awọn ẹtọ keke ohunkohun ti. Animu keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby siweta lomo Jean shorts, Williamsburg hoodie minim qui o jasi ko ti gbọ ti wọn et cardigan Trust fund culpa biodiesel wes anderson aesthetic. Nihi tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

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.

one

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.

two

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.

three

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.

Keytar twee bulọọgi, culpa ojiṣẹ apo marfa ohunkohun ti delectus ounje ikoledanu. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats o jasi ko tii gbọ ti wọn consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat ṣaaju ki wọn to ta, Terry Richardson proident brunch nesciunt quis cosby siweta pariatur keffiyeh ut helvetica artisan. Cardigan iṣẹ ọti seitan readymade velit. VHS chambray laboris tempor veniam. Animu mollit minim commodo ullamco thundercats.

<nav id="navbar-example2" class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#fat">@fat</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#mdo">@mdo</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#one">one</a>
        <a class="dropdown-item" href="#two">two</a>
        <div role="separator" class="dropdown-divider"></div>
        <a class="dropdown-item" href="#three">three</a>
      </div>
    </li>
  </ul>
</nav>
<div data-spy="scroll" data-target="#navbar-example2" data-offset="0">
  <h4 id="fat">@fat</h4>
  <p>...</p>
  <h4 id="mdo">@mdo</h4>
  <p>...</p>
  <h4 id="one">one</h4>
  <p>...</p>
  <h4 id="two">two</h4>
  <p>...</p>
  <h4 id="three">three</h4>
  <p>...</p>
</div>

Apeere pẹlu iteeye nav

Scrollspy tun ṣiṣẹ pẹlu iteeye .navs. Ti itẹ-ẹiyẹ .navba jẹ .active, awọn obi rẹ yoo tun jẹ .active. Yi lọ si agbegbe lẹgbẹẹ navbar ki o wo iyipada kilasi ti nṣiṣe lọwọ.

Nkan 1

Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Ṣe aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum inciddunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur ni. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.

Nkan 1-1

Amet tempor mollit aliquip pariatur excepteur commodo do ea cillum commodo Lorem et occaecat elit qui et. Aliquip labore ex ex esse voluptate occaecat Lorem ullamco deserunt. Aliqua cillum excepteur irure consequat id quis ea. Sit proident ullamco aute magna pariatur nostrud laala. Reprehenderit aliqua commodo eiusmod aliquip est do duis amet proident magna consectetur consequat eu commodo fugiat non quis. Enim aliquip exercitation ullamco adipisicing voluptate excepteur minim exercitation minim minim commodo adipisicing exercitation officia nisi adipisicing. Animu id duis qui consequat labore adipisicing sint dolor elit cillum anim et fugiat.

Nkan 1-2

Cillum nisi deserunt magna eiusmod qui eiusmod velit voluptate pariatur laborum sunt enim. Irure laboris mollit consequat incididunt sint et culpa culpa incididunt adipisicing magna magna occaecat. Nulla ipsum cillum eiusmod sint elit excepteur ea labore enim consectetur in labore anim. Proident ullamco ipsum esse elit ut Lorem eiusmod dolor et eiusmod. Anim occaecat nulla in non consequat eiusmod velit incididunt.

Item 2

Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident.

Item 3

Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.

Item 3-1

Deserunt quis elit Lorem eiusmod amet enim enim amet minim Lorem proident nostrud. Ea id dolore anim exercitation aute fugiat labore voluptate cillum do laboris labore. Ex velit exercitation nisi enim labore reprehenderit labore nostrud ut ut. Esse officia sunt duis aliquip ullamco tempor eiusmod deserunt irure nostrud irure. Ullamco proident veniam laboris ea consectetur magna sunt ex exercitation aliquip minim enim culpa occaecat exercitation. Est tempor excepteur aliquip laborum consequat do deserunt laborum esse eiusmod irure proident ipsum esse qui.

Item 3-2

Labore sit culpa commodo elit adipisicing sit aliquip elit proident voluptate minim mollit nostrud aute reprehenderit ṣe. Mollit excepteur eu Lorem ipsum anim commodo sit labore Lorem ni adaṣe ti o daju iṣẹlẹ. Occaecat consectetur nisi ni occaecat proident minim enim sunt reprehenderit exercitation cupidatat et do officia. Aliquip consequat ad labore labore mollit ut amet. Sit pariatur tempor proident ni veniam culpa aliqua excepteur elit magna fugiat eiusmod amet officia.

<nav id="navbar-example3" class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <nav class="nav nav-pills flex-column">
    <a class="nav-link" href="#item-1">Item 1</a>
    <nav class="nav nav-pills flex-column">
      <a class="nav-link ml-3 my-1" href="#item-1-1">Item 1-1</a>
      <a class="nav-link ml-3 my-1" href="#item-1-2">Item 1-2</a>
    </nav>
    <a class="nav-link" href="#item-2">Item 2</a>
    <a class="nav-link" href="#item-3">Item 3</a>
    <nav class="nav nav-pills flex-column">
      <a class="nav-link ml-3 my-1" href="#item-3-1">Item 3-1</a>
      <a class="nav-link ml-3 my-1" href="#item-3-2">Item 3-2</a>
    </nav>
  </nav>
</nav>

<div data-spy="scroll" data-target="#navbar-example3" data-offset="0">
  <h4 id="item-1">Item 1</h4>
  <p>...</p>
  <h5 id="item-1-1">Item 1-1</h5>
  <p>...</p>
  <h5 id="item-1-2">Item 1-2</h5>
  <p>...</p>
  <h4 id="item-2">Item 2</h4>
  <p>...</p>
  <h4 id="item-3">Item 3</h4>
  <p>...</p>
  <h5 id="item-3-1">Item 3-1</h5>
  <p>...</p>
  <h5 id="item-3-2">Item 3-2</h5>
  <p>...</p>
</div>

Apẹẹrẹ pẹlu ẹgbẹ-akojọ

Scrollspy tun ṣiṣẹ pẹlu awọn .list-groups. Yi lọ si agbegbe lẹgbẹẹ ẹgbẹ atokọ ki o wo iyipada kilasi ti nṣiṣe lọwọ.

Nkan 1

Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Ṣe aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum inciddunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur ni. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.

Nkan 2

Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat ti kii elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident.

Nkan 3

Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.

Nkan 4

Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.

<div id="list-example" class="list-group">
  <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
  <a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
  <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
  <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
</div>
<div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example">
  <h4 id="list-item-1">Item 1</h4>
  <p>...</p>
  <h4 id="list-item-2">Item 2</h4>
  <p>...</p>
  <h4 id="list-item-3">Item 3</h4>
  <p>...</p>
  <h4 id="list-item-4">Item 4</h4>
  <p>...</p>
</div>

Lilo

Nipasẹ awọn abuda data

Lati fi irọrun ṣafikun ihuwasi scrollspy si lilọ kiri oke rẹ, ṣafikun data-spy="scroll"si ipin ti o fẹ ṣe amí lori (julọ julọ eyi yoo jẹ <body>). Lẹhinna ṣafikun data-targetẹda pẹlu ID tabi kilasi ti ẹya obi ti .navpaati Bootstrap eyikeyi.

body {
  position: relative;
}
<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

Nipasẹ JavaScript

Lẹhin fifi kun position: relative;ninu CSS rẹ, pe scrollspy nipasẹ JavaScript:

$('body').scrollspy({ target: '#navbar-example' })

Awọn ibi-afẹde ID ti o yanju nilo

Awọn ọna asopọ Navbar gbọdọ ni awọn ibi-afẹde id ti o yanju. Fun apẹẹrẹ, <a href="#home">home</a>gbọdọ ṣe deede si nkan kan ninu DOM bii <div id="home"></div>.

Awọn eroja ti kii ṣe ibi- afẹde :visiblekọju

Awọn eroja ibi-afẹde ti kii ṣe :visibleni ibamu si jQuery ni yoo foju kọbikita ati pe awọn nkan nav ti o baamu wọn kii yoo ṣe afihan.

Awọn ọna

.scrollspy('refresh')

Nigbati o ba nlo scrollspy ni apapo pẹlu fifi kun tabi yiyọ awọn eroja kuro lati DOM, iwọ yoo nilo lati pe ọna isọdọtun bii bẹ:

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

.scrollspy('dispose')

Pa ohun ano ká scrollspy.

Awọn aṣayan

Awọn aṣayan le ṣee kọja nipasẹ awọn abuda data tabi JavaScript. Fun awọn abuda data, fi orukọ aṣayan si data-, bi ninu data-offset="".

Oruko Iru Aiyipada Apejuwe
aiṣedeede nọmba 10 Awọn piksẹli lati aiṣedeede lati oke nigbati o ṣe iṣiro ipo ti yi lọ.
ọna okun auto Wiwa apakan wo ni eroja amí wa ninu. autoyoo yan ọna ti o dara julọ lati gba awọn ipoidojuko yi lọ. offsetyoo lo ọna aiṣedeede jQuery lati gba awọn ipoidojuko yi lọ. positionyoo lo ọna ipo jQuery lati gba awọn ipoidojuko yi lọ.
afojusun okun Ni pato eroja lati lo ohun itanna Scrollpy.

Awọn iṣẹlẹ

Iṣẹlẹ Iru Apejuwe
mu ṣiṣẹ.bs.scrollspy Iṣẹlẹ yi ina lori awọn yi ano nigbakugba ti a titun ohun kan di mu šišẹ nipasẹ awọn scrollspy. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})