Scrollspy

Ավտոմատ թարմացրեք Bootstrap նավիգացիան կամ ցուցակագրեք խմբի բաղադրիչները՝ ոլորման դիրքի հիման վրա՝ ցույց տալու համար, թե որ հղումն է ներկայումս ակտիվ տեսադաշտում:

Ինչպես է դա աշխատում

Scrollspy-ն ունի մի քանի պահանջներ՝ ճիշտ գործելու համար.

Եթե դուք կառուցում եք մեր JavaScript-ը աղբյուրից, դա պահանջում էutil.js :
Այն պետք է օգտագործվի Bootstrap nav բաղադրիչի կամ ցուցակի խմբի վրա :
Scrollspy-ը պահանջում position: relative;է այն տարրը, որը դուք լրտեսում եք, սովորաբար <body>.
Երբ լրտեսում եք այլ տարրերի վրա <body>, համոզվեք, որ ունենաք heightհավաքածու և overflow-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>

Օրինակ՝ nested nav

Scrollspy-ն աշխատում է նաև nested .navs. Եթե բնադրված .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-groupս. Ոլորեք ցուցակի խմբի կողքին գտնվող տարածքը և դիտեք ակտիվ դասի փոփոխությունը:

Կետ 1 Կետ 2 3-րդ կետ Կետ 4

Կետ 1

Տեղապահի բովանդակությունը scrollspy list-group օրինակի համար: Սա վերաբերում է 1-ին կետին: Ներողություն խնդրելու կարիք չունեք: Հիմա վախ չկա, թող գնա ու ուղղակի ազատ եղիր, ես քեզ անվերապահորեն կսիրեմ։ Անցյալ ուրբաթ երեկոյան: Մի եղիր ամաչկոտ տղա, ես գրազ կգամ, որ դա գեղեցիկ է: Ամառը ավագ դպրոցից հետո, երբ մենք առաջին անգամ հանդիպեցինք: ― Որովհետև նա մուսան է և նկարիչը։ Ինչ? Սպասեք։ Մտածեցի, որ ես բացառություն եմ։

Կետ 2

Տեղապահի բովանդակությունը scrollspy list-group օրինակի համար: Սա վերաբերում է 2-րդ կետին: Այո, նա պարում է իր ռիթմով: Օ ոչ. Դու կարող էիր լինել ամենամեծը: ― Որովհետև, երեխա, դու հրավառություն ես։ Միգուցե պատճառ է, որ բոլոր դռները փակ են։ Բացեք ձեր սիրտը և թող այն սկսվի: Այնքան շքեղ, այո, նա դասական է:

3-րդ կետ

Տեղապահի բովանդակությունը scrollspy list-group օրինակի համար: Սա վերաբերում է 3-րդ կետին: Մենք ավելի ու ավելի ենք բարձրանում: Երբեք մեկը առանց մյուսի, մենք պայմանագիր կնքեցինք: Ես քայլում եմ օդով: Ինչ-որ մեկն ասաց, որ դու հեռացրեցիր քո դաջվածքը: Հիմա ես թիթեռի պես լողում եմ։ Տոնով, արևայրուքով տեղավորվում և պատրաստ է, բարձրացրեք այն, ինչը ծանրանում է: Որովհետև մի անգամ դու իմն ես, մեկ անգամ՝ իմը: Դուք պարզապես պետք է վառեք լույսը և թողեք, որ այն փայլի: Այսպիսով, մենք հարվածեցինք բուլվարին: Դուք երբևէ զգացե՞լ եք, որ թուղթը այդքան բարակ է: Ես տեսնում եմ այդ ամենը, տեսնում եմ հիմա:

Կետ 4

Տեղապահի բովանդակությունը scrollspy list-group օրինակի համար: Սա վերաբերում է 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;զանգահարեք scrollspy-ը JavaScript-ի միջոցով.

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

Պահանջվում են լուծելի ID թիրախներ

Navbar-ի հղումները պետք է ունենան լուծելի ID թիրախներ: Օրինակ, a-ն <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')`

Ոչնչացնում է տարրի պտտվող մատիտը:

Ընտրանքներ

Ընտրանքները կարող են փոխանցվել տվյալների ատրիբուտների կամ 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

Ինչպես է դա աշխատում

Օրինակ navbar-ում

@ճարպ

@mdo

մեկ

two

three

Օրինակ՝ nested nav

Կետ 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')`