Scrollspy

Навигатсияи Bootstrap ё ҷузъҳои гурӯҳиро дар асоси мавқеъи ҳаракат ба таври худкор навсозӣ кунед, то нишон диҳед, ки кадом истинод дар айни замон дар порти намоиш фаъол аст.

Он чӣ гуна кор мекунад

Scrollspy барои дуруст кор кардан чанд талабот дорад:

Агар шумо JavaScript-и моро аз сарчашма сохта истода бошед, онutil.js .
Он бояд дар як ҷузъи nav Bootstrap ё гурӯҳи рӯйхат истифода шавад.
Scrollspy position: relative;элементеро, ки шумо ҷосусӣ мекунед, талаб мекунад, одатан <body>.
Ҳангоми ҷосусӣ ба ҷузъҳои ғайр аз <body>, боварӣ ҳосил кунед, ки heightмаҷмӯи ва overflow-y: scroll;татбиқшаванда дошта бошед.
Лангарҳо ( <a>) лозиманд ва бояд ба унсуре бо он ишора idкунанд.

Вақте ки бомуваффақият амалӣ карда мешавад, гурӯҳи нав ё рӯйхати шумо мувофиқан навсозӣ мешавад ва .activeсинфро аз як ашё ба дигараш дар асоси ҳадафҳои алоқаманди худ интиқол медиҳад.

Майдони зери наворро ҳаракат кунед ва тағирёбии синфи фаъолро тамошо кунед. Унсурҳои афтанда низ таъкид карда мешаванд.

@фарбеҳ

Мундариҷаи ҷойнишин барои мисоли scrollspy. Шумо меъмории беҳтаринро доред. Мӯҳрҳои шиноснома, вай космополит аст. Хуб, тару тоза, сахт, мо онро дар қуфл гирифтем. Ҳеҷ гоҳ нақша надоштам, ки рӯзе туро аз даст медиҳам. Вай дили шуморо мехӯрад. Бӯсаи ту кайҳон аст, ҳар ҳаракат ҷоду аст. Ман онҳоеро дар назар дорам, ман дар назар дорам, ки вай ҳамон аст. Ассалому алайкум азизон, биёед саёҳат кунем. Танҳо шабе мисли 4 июл соҳиби! Аммо шумо беҳтар мебудед, ки барбод равед.

@mdo

Placeholder content for the scrollspy example. '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.

one

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

Мундариҷаи ҷойнишин барои мисоли scrollspy. Агар шумо хоҳед, ки рақс кунед, агар шумо ҳама чизро хоҳед, медонед, ки ман духтаре ҳастам, ки шумо бояд занг занед. Аз тӯфони ман бигзарам. Пас ичозат дихед, ки ба шумо костюми зодрузатонро дарбар кунам. Яке, ки ноил шуд. Шаби ҷумъаи гузашта, ҳа, ман фикр мекунам, ки мо қонунро вайрон кардем, ҳамеша бигӯед, ки мо бас хоҳем кард. 'Зеро ки вай як каме аз Йоко аст, Ва вай каме аз 'Оҳ не'. Ман мехоҳам, ки даҳон меафтад, чашм мерезад, сар бармегардад, бадан зарба мезанад. Бале, мо кортҳои кредитии худро зиёд кардем ва аз бар ронда шудем.

Ва боз чанд мундариҷаи ҷойнишин барои андозагирии хуб.

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

Мисол бо навсозии лона

Scrollspy инчунин бо .navs nested кор мекунад. Агар лона .navбошад .active, падару модараш низ хоҳанд буд .active. Майдони паҳлӯи навбарро ҳаракат кунед ва тағирёбии синфи фаъолро тамошо кунед.

Банди 1

Мундариҷаи ҷойнишин барои мисоли scrollspy. Ин ба банди 1 тааллуқ дорад. Шуморо милҳо баланд ва хеле баланд мебарад, зеро вай як табассуми байналмилалӣ дорад. Дар кати ман марди ношиносе хаст, дар сарам зад. Оҳ, не. Дар зиндагии дигар ман туро водор мекардам, ки бимонӣ. Чунки ман ба ҳама чиз қодирам. Муносиб барои ҷанги тоҷи ман. Барои дуздидани машруботи волидонатон ва ба бом баромадан истифода мешуданд. Оҳанг, танбалӣ мувофиқ ва омода, онро боло гардонед, зеро он вазнин мешавад. Муҳаббати ӯ мисли маводи мухаддир аст. Ман фикр мекунам, ки ман фаромӯш кардам, ки интихоб доштам.

Банди 1-1

Мундариҷаи ҷойнишин барои мисоли scrollspy. Ин ба банди 1-1 дахл дорад. Шумо меъмории беҳтаринро доред. Мӯҳрҳои шиноснома, вай космополит аст. Хуб, тару тоза, сахт, мо онро дар қуфл гирифтем. Ҳеҷ гоҳ нақша надоштам, ки рӯзе туро аз даст медиҳам. Вай дили шуморо мехӯрад. Бӯсаи ту кайҳон аст, ҳар ҳаракат ҷоду аст. Ман онҳоеро дар назар дорам, ман дар назар дорам, ки вай ҳамон аст. Ассалому алайкум азизон, биёед саёҳат кунем. Танҳо шабе мисли 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

Мундариҷаи ҷойнишин барои мисоли scrollspy. Ин ба банди 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 Банди 2 Банди 3 Банди 4

Банди 1

Мундариҷаи ҷойнишин барои мисоли гурӯҳи scrollspy. Ин ба банди 1 дахл дорад. Узр талаб кардан лозим нест. Ҳоло тарс нест, бигзор ва танҳо озод бош, ман туро бечунучаро дӯст медорам. Шаби ҷумъаи гузашта. Як бача шарм нашав, ман боварӣ дорам, ки ин зебо аст. Тобистон пас аз мактаби миёна, вақте ки мо бори аввал вохӯрдем. Зеро вай муза ва рассом аст. Чӣ? Интизор шавед. Фикр мекардам, ки ман истисно ҳастам.

Банди 2

Мундариҷаи ҷойнишин барои мисоли гурӯҳи scrollspy. Ин ба банди 2 тааллуқ дорад. Бале, вай бо зарбаи худ рақс мекунад. Оҳ, не. Шумо метавонистед бузургтарин бошед. Зеро, кӯдак, ту оташбозӣ ҳастӣ. Шояд сабаби баста шудани ҳама дарҳо бошад. Дили худро кушоед ва бигзор он оғоз шавад. Пас, хеле зебо, ҳа, вай классик аст.

Банди 3

Мундариҷаи ҷойнишин барои мисоли гурӯҳи scrollspy. Ин ба банди 3 дахл дорад. Мо баландтар ва баландтар мешавем. Ҳеҷ гоҳ яке бе дигаре нест, мо паймон бастаем. Ман дар ҳаво қадам мезанам. Касе гуфт, ки шумо татуировкаатонро бардоштаед. Акнун ман мисли шабпарак шино мекунам. Оҳанг, танбалӣ мувофиқ ва омода, онро боло гардонед, зеро он вазнин мешавад. Зеро як бор аз они ман ҳастӣ, як бор аз они манӣ. Шумо танҳо бояд нурро даргиронед ва бигзоред, ки он дурахшид! Хамин тавр мо ба булвар омадем. Оё шумо ягон бор эҳсос мекунед, коғазро лоғар ҳис мекунед. Ман ҳамаашро мебинам, ҳоло мебинам.

Банди 4

Мундариҷаи ҷойнишин барои мисоли гурӯҳи scrollspy. Ин ба банди 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>

Истифода

Тавассути атрибутҳои додаҳо

Барои ба осонӣ илова кардани рафтори scrollspy ба новбари болоии худ, data-spy="scroll"ба унсуре, ки мехоҳед ҷосусӣ кунед, илова кунед (аксаран ин <body>). Сипас data-targetатрибутро бо ID ё синфи унсури волидайни ягон .navҷузъи Bootstrap илова кунед.

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

Пас аз илова кардани position: relative;CSS-и худ, ба scrollspy тавассути JavaScript занг занед:

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

Ҳадафҳои ID-и ҳалшаванда талаб карда мешаванд

Истинодҳои навбар бояд ҳадафҳои ҳалшавандаи ID дошта бошанд. Масалан, <a href="#home">home</a>бояд ба чизе дар DOM мувофиқат кунад <div id="home"></div>.

Унсурҳои `:visible`ғайримақсаднок сарфи назар карда шуданд

Унсурҳои мақсаднок, ки :visibleмувофиқи jQuery нестанд , сарфи назар карда мешаванд ва ҷузъҳои нави нави онҳо ҳеҷ гоҳ таъкид карда намешаванд.

Усулҳо

`.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	Ин ҳодиса дар унсури паймоиш ҳар вақте, ки ҷузъи нав тавассути scrollspy фаъол мешавад, оташ мегирад.

$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})

Scrollspy

Он чӣ гуна кор мекунад

Намуна дар навор

@фарбеҳ

@mdo

one

two

three

Мисол бо навсозии лона

Банди 1

Банди 1-1

Банди 1-2

Item 2

Item 3

Item 3-1

Item 3-2

Намуна бо рӯйхат-гурӯҳ

Банди 1

Банди 2

Банди 3

Банди 4

Истифода

Тавассути атрибутҳои додаҳо

Тавассути JavaScript

Ҳадафҳои ID-и ҳалшаванда талаб карда мешаванд

Унсурҳои :visibleғайримақсаднок сарфи назар карда шуданд

Усулҳо

.scrollspy('refresh')

.scrollspy('dispose')

Имконот

Ҳодисаҳо

Унсурҳои `:visible`ғайримақсаднок сарфи назар карда шуданд

`.scrollspy('refresh')`

`.scrollspy('dispose')`