in English

Scrollspy

Bootstrap навигациясен автоматик рәвештә яңартыгыз яки визуаль портта нинди сылтаманың актив булуын күрсәтү өчен әйләндерү позициясенә нигезләнеп төркем компонентларын санап чыгыгыз.

Ничек бу эшли

Scrollspy дөрес эшләү өчен берничә таләп бар:

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

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

Диңгез тактасында мисал

Диңгез тактасы астындагы мәйданны әйләндерегез һәм актив класс үзгәрүен карагыз. Ачылучы әйберләр дә күрсәтеләчәк.

@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 шулай ук ​​ояланган .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-group​​s белән эшли. Исемлек төркеме янындагы мәйданны әйләндерегез һәм актив класс үзгәрүен карагыз.

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>). Аннары ID яки теләсә нинди 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' })

Чишелә торган 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')

Элементның скролспиясен юк итә.

Вариантлар

Вариантларны мәгълүмат атрибутлары яки JavaScript аша бирергә мөмкин. Мәгълүмат атрибутлары өчен вариант исемен data-өстәгез data-offset="".

Исем Тип Килешү Тасвирлау
офсет саны 10 Пиксель әйләндерү позициясен исәпләгәндә өстән офсет.
ысулы кыл автомобиль Шпион элементының кайсы бүлектә булуын таба. autoКүчерү координаталарын алу өчен иң яхшы ысулны сайлар. offsetәйләндерү координаталарын алу өчен jQuery офсет ысулын кулланачак. positionәйләндерү координаталарын алу өчен jQuery позициясе ысулын кулланачак.
максат кыл | jQuery объект | DOM элементы Scrollspy плагинын куллану өчен элементны күрсәтә.

Вакыйгалар

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