in English

Scrollspy

Харах цонхонд аль холбоос идэвхтэй байгааг харуулахын тулд гүйлгэх байрлалд тулгуурлан Bootstrap навигацийг автоматаар шинэчлэх эсвэл бүлгийн бүрэлдэхүүн хэсгүүдийг жагсаах.

Хэрхэн ажилладаг

Scrollspy зөв ажиллахын тулд хэд хэдэн шаардлага тавьдаг:

  • Хэрэв та манай JavaScript-г эх сурвалжаас бүтээж байгаа болutil.js .
  • Үүнийг Bootstrap nav компонент эсвэл жагсаалтын бүлэгт ашиглах ёстой .
  • Scrollspy нь position: relative;таны тагнаж байгаа элемент дээр ихэвчлэн <body>.
  • -ээс бусад элементүүдийг тагнаж байхдаа багц болон түрхсэн <body>байхаа мартуузай .heightoverflow-y: scroll;
  • Зангуу ( <a>) шаардлагатай бөгөөд үүнтэй элементийг зааж өгөх ёстой id.

Амжилттай хэрэгжсэнээр таны навигаци эсвэл жагсаалтын бүлгийг .activeхолбогдох зорилтууд дээр үндэслэн ангиудыг нэг зүйлээс нөгөө зүйл рүү шилжүүлэх болно.

Navbar дээрх жишээ

Navbar-ийн доорх хэсгийг гүйлгэж, идэвхтэй ангийн өөрчлөлтийг хараарай. Унждаг зүйлсийг мөн тодотгох болно.

@ тарган

Srollspy жишээний орлуулагчийн контент. Та хамгийн шилдэг архитектуртай. Паспортын тамга, тэр бол космополит. Сайхан, шинэлэг, догшин, бид үүнийг цоожтой болгосон. Хэзээ ч нэг өдөр чамайг алдна гэж бодож байгаагүй. Тэр чиний зүрхийг идэж байна. Таны үнсэлт сансар огторгуй, хөдөлгөөн бүр нь ид шид юм. Би тэр хүмүүсийг л хэлэх гэсэн юм, тэр л юм шиг. Сайн байцгаана уу хайртай хүмүүсээ аялалд гарцгаая. 7-р сарын 4 шиг шөнийг зүгээр л эзэмшээрэй! Гэхдээ та дэмий үрэх нь дээр.

@mdo

Srollspy жишээний орлуулагчийн контент. Учир нь тэр бол музей, зураач. (Бид ингэж хийдэг) Тэгэхээр та ид шидээр тоглохыг хүсч байна. Тиймээс надад бүгдийг өгөхөөсөө өмнө итгэлтэй байгаарай. Би алхаж байна, би агаарт алхаж байна (өнөө орой). Яриа алгасаж, бүгдийг нь сонсоод, алхах цаг болжээ.

нэг

Placeholder content for the scrollspy example. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.

two

Placeholder content for the scrollspy example. It's time to bring out the big balloons. I'm walking, I'm walking on air (tonight). Yeah, we maxed our credit cards and got kicked out of the bar. Yo, shout out to all you kids, buying bottle service, with your rent money. I'm ma get your heart racing in my skin-tight jeans. If you get the chance you better keep her. Yo, shout out to all you kids, buying bottle service, with your rent money.

three

Srollspy жишээний орлуулагчийн контент. Хэрвээ чи бүжиглэхийг хүсч байгаа бол, хэрэв чи бүгдийг нь хүсч байвал, чи намайг дуудах ёстой охин гэдгийг мэднэ. Би шуургыг даван туулах болно. Тиймээс би чамд төрсөн өдрийн хувцасаа өмсүүлье. Зугтсан нэг нь. Өнгөрсөн баасан гаригийн орой, тийм ээ, би бид хууль зөрчсөн гэж бодож байна, бид зогсох болно гэж үргэлж хэлдэг. Учир нь тэр бага зэрэг Ёко, бас бага зэрэг 'Өө үгүй'. Би эрүүгээ унжуулж, нүдээ бүлтийлгэж, толгойгоо эргүүлж, биеийг цочирдуулахыг хүсч байна. Тийм ээ, бид зээлийн картынхаа тоог нэмэгдүүлж, баарнаас хөөгдөв.

Мөн зарим нэг орлуулагчийн агуулгыг сайн хэмжихийн тулд.

<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-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>

Оруулсан nav-тай жишээ

Scrollspy нь мөн үүрлэсэн .navs-тэй ажилладаг. Хэрэв үүрлэсэн .navбол .activeтүүний эцэг эх нь мөн байх болно .active. Navbar-ийн хажууд байгаа хэсгийг гүйлгээд идэвхтэй ангийн өөрчлөлтийг хараарай.

1-р зүйл

Srollspy жишээний орлуулагчийн контент. Энэ нь 1-р зүйлтэй холбоотой. Чамайг олон миль өндөрт аваачдаг, яагаад гэвэл тэр олон улсын хэмжээнд ганцхан инээмсэглэлтэй. Миний орон дээр танихгүй хүн байна, миний толгой хүчтэй цохилж байна. Өө үгүй ​​ээ. Өөр амьдралд би чамайг үлдээх болно. Учир нь би юу ч хийх чадвартай. Миний титмийн төлөөх тулаанд бэлдэж байна. Аав, ээжийнхээ архи, согтууруулах ундаа хулгайлж, дээвэр дээр гарахад ашигладаг байсан. Ая, бор өнгөтэй, бэлэн болсон тул дээшээ эргүүлээрэй, учир нь энэ нь хүнд болж байна. Түүний хайр хар тамхи шиг. Би сонголтоо мартсан байх гэж бодож байна.

Зүйл 1-1

Srollspy жишээний орлуулагчийн контент. Энэ нь 1-1-р зүйлтэй холбоотой. Та хамгийн шилдэг архитектуртай. Паспортын тамга, тэр бол космополит. Сайхан, шинэлэг, догшин, бид үүнийг цоожтой болгосон. Хэзээ ч нэг өдөр чамайг алдна гэж бодож байгаагүй. Тэр чиний зүрхийг идэж байна. Таны үнсэлт сансар огторгуй, хөдөлгөөн бүр нь ид шид юм. Би тэр хүмүүсийг л хэлэх гэсэн юм, тэр л юм шиг. Сайн байцгаана уу хайртай хүмүүсээ аялалд гарцгаая. 7-р сарын 4 шиг шөнийг зүгээр л эзэмшээрэй! Гэхдээ та дэмий үрэх нь дээр.

Зүйл 1-2

Placeholder content for the scrollspy example. This one relates to the item 1-2. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

Item 2

Placeholder content for the scrollspy example. This one relates to item 2. Don't need apologies. There is no fear now, let go and just be free, I will love you unconditionally. Last Friday night. Don't be a shy kinda guy I'll bet it's beautiful. Summer after high school when we first met. 'Cause she's the muse and the artist. What? Wait. No, no, no, no. Thought that I was the exception.

Item 3

Placeholder content for the scrollspy example. This one relates to item 3. Word on the street, you got somethin' to show me, me. All this money can't buy me a time machine. Make it like your birthday everyday. So we hit the boulevard. You make me feel like I'm livin' a teenage dream, the way you turn me on Skip the talk, heard it all, time to walk the walk. Word on the street, you got somethin' to show me, me. It's no big deal, it's no big deal, it's no big deal.

Item 3-1

Placeholder content for the scrollspy example. This one relates to item 3-1. Baby do you dare to do this? This is no big deal. Yeah, you're lucky if you're on her plane. Just own the night like the 4th of July! Standing on the frontline when the bombs start to fall. So just be sure before you give it all to me.

Item 3-2

Srollspy жишээний орлуулагчийн контент. Энэ нь 3-2-р зүйлтэй холбоотой. Та анхных, солих боломжгүй. Шөнөжингөө тэд чиний дууг тоглож байна. Калифорнийн охид бид маргашгүй. Торгүй шувуу шиг. Одоо айдас байхгүй, зүгээр л чөлөөтэй бай, би чамайг болзолгүйгээр хайрлана. Би ханан дээрх бичээсийг харж байна. Та дэлхийгээр аялж болно, гэхдээ алтан эрэгт юу ч ойртдоггүй.

<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>

Жагсаалтын бүлэгтэй жишээ

Scrollspy мөн .list-groups-тэй ажилладаг. Жагсаалтын бүлгийн хажууд байгаа хэсгийг гүйлгээд идэвхтэй ангийн өөрчлөлтийг хараарай.

1-р зүйл

Srollspy жагсаалтын бүлгийн жишээнд зориулсан орлуулагчийн контент. Энэ нь 1-р зүйлтэй холбоотой. Уучлал гуйх шаардлагагүй. Одоо айдас байхгүй, зүгээр л чөлөөтэй бай, би чамайг болзолгүйгээр хайрлана. Өнгөрсөн баасан гарагийн орой. Битгий ичимхий залуу бай, би үүнийг үзэсгэлэнтэй гэдэгт итгэлтэй байна. Ахлах сургуулиа төгсөөд анх танилцсан зун. Учир нь тэр бол музей, зураач. Юу? Хүлээгээрэй. Би үл хамаарах зүйл гэж бодсон.

2-р зүйл

Srollspy жагсаалтын бүлгийн жишээнд зориулсан орлуулагчийн контент. Энэ нь 2-р зүйлтэй холбоотой. Тиймээ, тэр өөрийн хэмнэлээр бүжиглэдэг. Өө үгүй ​​ээ. Та хамгийн агуу нь байж болох байсан. Учир нь хонгор минь, чи бол салют. Магадгүй бүх хаалга хаагдсан шалтгаан байж болох юм. Зүрх сэтгэлээ нээж, зүгээр л эхлүүлээрэй. Маш дэгжин, тийм ээ, тэр бол сонгодог.

3-р зүйл

Srollspy жагсаалтын бүлгийн жишээнд зориулсан орлуулагчийн контент. Энэ нь 3-р зүйлтэй холбоотой. Бид улам дээшилсээр байна. Хэзээ ч нэг нь нөгөөгүй, бид гэрээ хийсэн. Би агаарт алхаж байна. Хэн нэгэн таныг шивээсээ арилгасан гэж хэлсэн. Одоо би эрвээхэй шиг хөвж байна. Ая, бор өнгөтэй, бэлэн болсон тул дээшээ эргүүлээрэй, учир нь энэ нь хүнд болж байна. Учир нь чи нэг удаа минийх, нэг удаа минийх болно. Та зүгээр л гэрлийг асааж, гэрэлтүүлэх хэрэгтэй! Ингээд бид өргөн чөлөөнд хүрэв. Та хэзээ нэгэн цагт ийм нимгэн цаас шиг санагдаж байна уу? Би бүгдийг харж байна, одоо харж байна.

4-р зүйл

Srollspy жагсаалтын бүлгийн жишээнд зориулсан орлуулагчийн контент. Энэ нь 4-р зүйлтэй холбоотой. Бидний анх танилцаж байх үед ахлах сургуулиа төгсөөд зун. Одоо айдас байхгүй, зүгээр л чөлөөтэй бай, би чамайг болзолгүйгээр хайрлана. Нарны туяанд үнссэн арьс маш халуун байна. Энэ хайр нь таныг хөөргөх болно.

<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>

Хэрэглээ

Өгөгдлийн шинж чанаруудаар дамжуулан

Топбарын навигацдаа гүйлгэх үйлдлийг хялбархан нэмэхийн тулд тагнахыг хүсэж буй элементдээ нэмнэ data-spy="scroll"үү (ихэнхдээ энэ нь <body>). Дараа нь ямар нэгэн Bootstrap бүрэлдэхүүн хэсгийн data-targetэх элементийн ID эсвэл анги бүхий атрибутыг нэмнэ үү..nav

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>

JavaScript-ээр дамжуулан

CSS-ээ нэмсний дараа position: relative;JavaScript-ээр дамжуулан scrollspy руу залгана уу:

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

Шийдвэрлэх боломжтой ID зорилтууд шаардлагатай

Navbar холбоосууд нь шийдвэрлэх боломжтой id зорилтуудтай байх ёстой. Жишээ нь, <a href="#home">home</a>заавал байх ёстой зүйл нь DOM дахь <div id="home"></div>.

Зорилтот бус :visibleэлементүүдийг үл тоомсорлосон

:visiblejQuery- д заагаагүй зорилтот элементүүдийг үл тоомсорлож, тэдгээрийн харгалзах навигацийн элементүүдийг хэзээ ч тодруулахгүй.

Арга зүй

.scrollspy('refresh')

Scrollspy-г DOM-д элемент нэмэх, хасахтай хамт ашиглах үед та дараах байдлаар сэргээх аргыг дуудах хэрэгтэй болно.

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

.scrollspy('dispose')

Элементийн scrollspy-г устгадаг.

Сонголтууд

Сонголтуудыг өгөгдлийн шинж чанарууд эсвэл JavaScript-ээр дамжуулж болно. Өгөгдлийн шинж чанаруудын хувьд сонголтын нэрийг -д data-хавсаргана data-offset="".

Нэр Төрөл Өгөгдмөл Тодорхойлолт
офсет тоо 10 Гүйлгэх байрлалыг тооцоолохдоо дээд талаас нь солих пиксел.
арга мөр авто Тагнасан элемент аль хэсэгт байгааг олно. autoГүйлгэх координатыг авах хамгийн сайн аргыг сонгоно. offsetгүйлгэх координатыг авахын тулд jQuery офсет аргыг ашиглах болно. positionгүйлгэх координатыг авахын тулд jQuery байрлалын аргыг ашиглах болно.
зорилтот мөр | jQuery объект | DOM элемент Scrollspy залгаасыг ашиглах элементийг зааж өгнө.

Үйл явдал

Үйл явдлын төрөл Тодорхойлолт
activate.bs.scrollspy Энэ үйл явдал гүйлгэх элемент дээр шинэ зүйл гүйлгэх үед идэвхждэг. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})