in English

Scrollspy

Көру портында қай сілтеме қазір белсенді екенін көрсету үшін айналдыру орнына негізделген Bootstrap шарлауын немесе тізім тобының құрамдастарын автоматты түрде жаңартыңыз.

Бұл қалай жұмыс істейді

Scrollspy-дің дұрыс жұмыс істеуі үшін бірнеше талаптары бар:

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

Сәтті орындалғанда, навигация немесе тізім тобы сәйкесінше жаңартылып, .activeолардың байланысты мақсаттары негізінде сыныпты бір элементтен келесіге жылжытады.

Шарлау тақтасындағы мысал

Шарлау тақтасының астындағы аумақты айналдырыңыз және белсенді сыныптың өзгеруін қараңыз. Ашылмалы элементтер де бөлектеледі.

@май

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 сонымен қатар кірістірілген .navs-мен жұмыс істейді. Ұя .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-тармақ

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>

Қолданылуы

Деректер атрибуттары арқылы

Үстіңгі тақтадағы шарлауға айналдыру әрекетін оңай қосу data-spy="scroll"үшін, шпиондық жасағыңыз келетін элементке қосыңыз (көбінесе бұл <body>). Содан кейін кез келген Bootstrap компонентінің data-targetнегізгі элементінің идентификаторы немесе сыныбы бар төлсипатты қосыңыз..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' })

Шешілетін идентификатор мақсаттары қажет

Шарлау тақтасының сілтемелерінде шешілетін идентификатор мақсаттары болуы керек. Мысалы, <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')

Элементтің айналдыруын бұзады.

Опциялар

Опцияларды деректер атрибуттары немесе 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...
})