in English

Scrollspy

Жүктөөчү навигацияны автоматтык түрдө жаңыртыңыз же сыдырма позициясына негизделген топтун компоненттерин тизмектеп, учурда көрүү терезесинде кайсы шилтеме активдүү экенин көрсөтүңүз.

Бул кантип иштейт

Scrollspy туура иштеши үчүн бир нече талаптарга ээ:

  • Эгер сиз биздин JavaScript булактан куруп жатсаңыз, андаutil.js .
  • Ал Bootstrap nav компонентинде же тизме тобунда колдонулушу керек .
  • Scrollspy position: relative;сиз шпион кылып жаткан элементти талап кылат, адатта <body>.
  • дан башка элементтерге шпиондук кылып жатканда , топтомун жана колдонулушун <body>унутпаңыз .heightoverflow-y: scroll;
  • Анкерлер ( <a>) талап кылынат жана аны менен элементти көрсөтүшү керек id.

Ийгиликтүү ишке ашырылгандан кийин, навигацияңыз же тизме тобуңуз ошого жараша жаңыланып, .activeклассты тиешелүү максаттарынын негизинде бир нерседен экинчисине жылдырат.

Navbarдагы мисал

Чабыт тилкесинин астындагы аймакты сыдырып, класстын активдүү өзгөрүшүн көрүңүз. Ашылма элементтер да баса белгиленет.

@fat

Scrollspy мисалы үчүн толтуруучу мазмун. Сизде эң сонун архитектура бар. Паспорттун штамптары, ал космополит. Жакшы, жаңы, катаал, биз аны кулпулап алдык. Бир күнү сенден айрылып калам деп ойлогон эмесмин. Ал сенин жүрөгүңдү жейт. Сиздин өбүүңүз космостук, ар бир кыймыл сыйкыр. Ошолорду айтайын дегеним, ал ошол сыяктуу. Салам жакындарым саякатка чыгалы. Жөн эле 4-июль сыяктуу түнгө ээ! Бирок сен текке кеткенин жакшы көрөсүң.

@mdo

Scrollspy мисалы үчүн толтуруучу мазмун. Анткени ал муза жана сүрөтчү. (Биз ушундай кылабыз) Демек, сиз сыйкыр менен ойногуңуз келет. Андыктан мага баарын берерден мурун ишениңиз. Мен жүрөм, абада жүрөм (бүгүн кечинде). Кепти өткөрүп жибер, баарын укту, сейилдөө үчүн убакыт.

бир

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 ошондой эле уячалар менен иштейт .nav. Эгерде уя .navболсо .active, анын ата-энеси да болот .active. Navbar жанындагы аймакты сыдырып, класстын активдүү өзгөрүшүн көрүңүз.

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-пункт

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>). Андан кийин атрибутту каалаган 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')

DOMдан элементтерди кошуу же алып салуу менен бирге scrollspy колдонуп жатканда, сиз жаңылоо ыкмасын төмөнкүдөй чакырышыңыз керек:

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

.scrollspy('dispose')

Элементтин жылдыргычын жок кылат.

Параметрлер

Параметрлер маалымат атрибуттары же JavaScript аркылуу берилиши мүмкүн. Дайындардын атрибуттары үчүн параметрдин атын data-, сыяктуу эле кошуңуз data-offset="".

аты Type Демейки Description
офсет саны 10 Сыдыруунун ордун эсептөөдө жогорудан жылыш үчүн пикселдер.
ыкмасы сап авто Чалгындалган элемент кайсы бөлүмдө экенин табат. autoЖылдыруу координаттарын алуу үчүн эң жакшы ыкманы тандайт. offsetжылдыруу координаттарын алуу үчүн jQuery офсет ыкмасын колдонот. positionжылдыруу координаттарын алуу үчүн jQuery позиция ыкмасын колдонот.
максаттуу string | jQuery объекти | DOM элементи Scrollspy плагинди колдонуу үчүн элементти белгилейт.

Окуялар

Окуя түрү Description
activate.bs.scrollspy Бул окуя жылдыруу элементинде жаңы нерсе scrollspy тарабынан активдештирилген сайын күйөт. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})