scrollspy

په اتوماتيک ډول د بوټسټریپ نیویګیشن تازه کړئ یا د سکرول موقعیت پراساس د ګروپ اجزا لیست کړئ ترڅو وښیې چې کوم لینک اوس مهال په لید پورټ کې فعال دی.

څنګه کار کوي

Scrollspy د سم کار کولو لپاره یو څو اړتیاوې لري:

که تاسو زموږ جاوا سکریپټ د سرچینې څخه جوړ کړئ، دا اړتیا لريutil.js .
دا باید د Bootstrap nav برخې یا لیست ګروپ کې وکارول شي .
Scrollspy position: relative;هغه عنصر ته اړتیا لري چې تاسو یې جاسوسي کوئ، معمولا د <body>.
کله چې پرته له نورو عناصرو جاسوسي وکړئ <body>، ډاډ ترلاسه کړئ چې یو heightسیټ ولرئ او overflow-y: scroll;پلي یې کړئ.
اینکرونه ( <a>) اړین دي او باید د دې سره یو عنصر ته اشاره وکړي id.

کله چې په بریالیتوب سره پلي شي، ستاسو د نیوی یا لیست ګروپ به د دې مطابق تازه شي، .activeټولګي د دوی اړوند اهدافو پراساس له یو توکي څخه بل ته حرکت کوي.

د نیوبار لاندې ساحه سکرول کړئ او د فعال ټولګي بدلون وګورئ. د ښکته کولو توکي به هم روښانه شي.

@ غوړ

د scrollspy مثال لپاره د ځای هولډر منځپانګه. تاسو غوره معمارۍ ترلاسه کړې. د پاسپورټ ټاپهونه، هغه کاسموپولیټین دی. ښه، تازه، تیاره، موږ یې په بند کې ترلاسه کړل. هېڅکله یې پلان نه درلود چې یوه ورځ به تا له لاسه ورکړم. هغه ستا زړه خوري. ستاسو بوس کائناتی دی، هر حرکت جادو دی. زما مطلب دی، زما مطلب دا دی لکه هغه یوه ده. سلامونه عزیزانو راځی چی یو سفر وکړو. یوازې د جولای د څلورمې په څیر شپه ولرئ! مګر تاسو باید ضایع شي.

@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. د نیوبار تر څنګ ساحه سکرول کړئ او د فعال ټولګي بدلون وګورئ.

توکي 1

د scrollspy مثال لپاره د ځای هولډر منځپانګه. دا د 1 توکي پورې اړه لري. تاسو ته میلونه لوړ، دومره لوړ، ځکه چې هغې دا نړیواله موسکا ترلاسه کړې ده. زما په بستر کې یو اجنبی دی، زما په سر کې ټکان دی. او، نه. په بل ژوند کې زه به تاسو ته پاتې شم. ځکه چې زه د هر څه توان لرم. زما د تاج جنګ لپاره مناسب. د خپل مور او پلار شراب غلا کول او چت ته پورته کیدل. ټون، ټین فټ او چمتو دی، پورته یې کړئ ځکه چې دا ډیر دروند کیږي. د هغې مینه د مخدره توکو په څیر ده. زه اټکل کوم چې ما هیر کړی چې ما یو انتخاب درلود.

توکي 1-1

د scrollspy مثال لپاره د ځای هولډر منځپانګه. دا د 1-1 توکي پورې اړه لري. تاسو غوره معمارۍ ترلاسه کړې. د پاسپورټ ټاپهونه، هغه کاسموپولیټین دی. ښه، تازه، تیاره، موږ یې په بند کې ترلاسه کړل. هېڅکله یې پلان نه درلود چې یوه ورځ به تا له لاسه ورکړم. هغه ستا زړه خوري. ستاسو بوس کائناتی دی، هر حرکت جادو دی. زما مطلب دی، زما مطلب دا دی لکه هغه یوه ده. سلامونه عزیزانو راځی چی یو سفر وکړو. یوازې د جولای د څلورمې په څیر شپه ولرئ! مګر تاسو باید ضایع شي.

توکي 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>

کارول

د معلوماتو ځانګړتیاو له لارې

ستاسو د ټاپ بار نیویګیشن کې په اسانۍ سره د سکرول سپي چلند اضافه کولو data-spy="scroll"لپاره ، هغه عنصر ته اضافه کړئ چې تاسو یې جاسوس کول غواړئ (ډیری معمولا دا به وي <body>). بیا data-targetد هر بوټسټریپ .navبرخې د اصلي عنصر ID یا ټولګي سره صفت اضافه کړئ.

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>

د جاواسکریپټ له لارې

ستاسو په سی ایس ایس کې اضافه کولو وروسته position: relative;، د جاواسکریپټ له لارې سکرول سپی ته زنګ ووهئ:

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

د حل وړ ID اهداف اړین دي

د Navbar لینکونه باید د حل وړ ID اهداف ولري. د مثال په توګه، یو <a href="#home">home</a>باید په DOM کې د یو څه سره مطابقت ولري لکه <div id="home"></div>.

غیر `:visible`هدفي عناصر له پامه غورځول شوي

د هدف عناصر چې د :visiblejQuery مطابق ندي به له پامه غورځول شي او د دوی اړونده توکي به هیڅکله روښانه نشي.

میتودونه

`.scrollspy('refresh')`

کله چې د DOM څخه د عناصرو اضافه کولو یا لرې کولو سره په ګډه سکرولسپي وکاروئ ، تاسو اړتیا لرئ د ریفریش میتود ته زنګ ووهئ لکه:

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

`.scrollspy('dispose')`

د یو عنصر سکرول سپي له منځه وړي.

اختیارونه

اختیارونه د ډیټا ځانګړتیاو یا جاواسکریپټ له لارې لیږدول کیدی شي. د ډیټا ځانګړتیاو لپاره، د اختیار نوم سره ضمیمه کړئ data-، لکه څنګه چې په کې data-offset="".

نوم	ډول	ډیفالټ	تفصیل
بندول	شمیره	10	د سکرول موقعیت محاسبه کولو پر مهال له پورتنۍ برخې څخه د خلاصولو لپاره پکسلونه.
طریقه	تار	اتومات	معلوم کړئ چې جاسوس عنصر په کومه برخه کې دی. `auto`د سکرول همغږۍ ترلاسه کولو لپاره به غوره میتود غوره کړي. `offset`د سکرول همغږي ترلاسه کولو لپاره به د jQuery آفسیټ میتود وکاروي. `position`د سکرول همغږي ترلاسه کولو لپاره به د jQuery موقعیت میتود وکاروي.
هدف	تار \| jQuery څيز \| د DOM عنصر		د Scrollspy پلگ ان پلي کولو لپاره عنصر مشخص کوي.

پیښې

د پیښې ډول	تفصیل
activate.bs.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

کارول

د معلوماتو ځانګړتیاو له لارې

د جاواسکریپټ له لارې

د حل وړ ID اهداف اړین دي

غیر :visibleهدفي عناصر له پامه غورځول شوي

میتودونه

.scrollspy('refresh')

.scrollspy('dispose')

اختیارونه

پیښې

غیر `:visible`هدفي عناصر له پامه غورځول شوي

`.scrollspy('refresh')`

`.scrollspy('dispose')`