Source

سکڕۆڵسپی

بە شێوەیەکی ئۆتۆماتیکی ڕێکخستنی Bootstrap یان پێکهاتەکانی گروپی لیست نوێ بکەرەوە بە پشتبەستن بە شوێنی سکڕۆڵ بۆ ئەوەی ئاماژە بەوە بدەیت کە کام بەستەر لە ئێستادا لە ڤیوپۆرت چالاکە.

چۆن کاردەکات

Scrollspy چەند پێداویستییەکی هەیە بۆ ئەوەی بە باشی کار بکات:

ئەگەر جاڤاسکڕێپتەکەمان لە سەرچاوەوە دروست دەکەیت، پێویستی بەutil.js .
دەبێت لەسەر پێکهاتەی Bootstrap nav یان گروپی لیست بەکاربهێنرێت .
Scrollspy پێویستی position: relative;بەو توخمە هەیە کە سیخوڕی لەسەر دەکەیت، بەزۆری <body>.
لەکاتی سیخوڕیکردن لەسەر توخمەکانی تر جگە لە <body>, دڵنیابە کە heightکۆمەڵەیەکت هەیە و overflow-y: scroll;جێبەجێی دەکەیت.
ئەنکرەکان ( <a>) پێویستن و دەبێت ئاماژە بە توخمێک بکەن کە ئەو id.

کاتێک بە سەرکەوتوویی جێبەجێ دەکرێت، گروپی nav یان لیستەکەت بەپێی ئەوە نوێ دەبێتەوە، .activeپۆلەکە لە بابەتێکەوە بۆ بابەتی دیکە دەگوازێتەوە بە پشتبەستن بە ئامانجە پەیوەندیدارەکانیان.

ناوچەی خوارەوەی navbar سکڕۆڵ بکە و سەیری گۆڕانی پۆلی چالاک بکە. هەروەها بابەتە دابەزینەکان تیشک دەخرێنە سەر.

@قەڵەو

ڕیکلام قیاس keytar، brunch id هونەر ئاهەنگ dolor labore. Pitchfork yr enim lo-fi پێش ئەوەی qui بفرۆشرێن. Tumblr مافی پاسکیل لە کێڵگە بۆ مێز هەرچییەک بێت. Anim keffiyeh کارلێس کاردیگان. کۆشکی وێنەی Velit seitan mcsweeney 3 گورگ مانگ irure. کۆسبی بلوز لۆمۆ جین شۆرت، ویلیامسبێرگ هودی مینیم qui ڕەنگە نەتبیستبێت لەوان et سندوقی متمانە کاردیگان culpa biodiesel wes anderson جوانکاری. Nihil تاتۆی accusamus، cred ئیرۆنی بایۆدیزەل keffiyeh پیشەسازی ullamco consequat.

@mdo

Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

one

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.

two

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa جانتای نامەبەر مارفا هەرچییەک بێت بارهەڵگری خۆراکی دیلێکتوس. Sapiente synth id گریمانە. Locavore sed helvetica cliche irony, ڕەشەبا پشیلە کە ڕەنگە نەتبیستبێت لەوان consequat hoodie گلوتین-بێ گلوتین lo-fi fap aliquip. Labore elit placeat پێش ئەوەی بفرۆشرێن، تێری ڕیچاردسۆن proident brunch nesciunt quis cosby بلوز pariatur keffiyeh ut helvetica پیشەسازی. کاردیگان بیرەی دەستی سێتان ڤێلیتی ئامادەکراو. ڤی ئێچ ئێس چامبرای لابۆریس پۆپۆڕ ڤینیام. ئەنیم مۆلیت مینی کۆمۆدۆ ئولامکۆ ڕەشەبا پشیلە.

<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-haspopup="true" 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 سکڕۆڵ بکە و سەیری گۆڕانی پۆلی چالاک بکە.

بڕگەی یەکەم

Ex consequat commodo چەوری وەرزشکردن aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. ئیپسوم ئیپسوم ئولامکۆ سیلوم کۆنسێکتێتور و ئۆت کۆنسێکتێتور لابەر بکە. Fugiat labourum incididunt tempo eu consequat enim دۆلۆر پرۆیێنت. Qui labourum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate غەیرە ئاژەڵەکان سەرپێچیکردن چەوریکردن دۆلۆر و دەرئەنجامەکەی جێهێشتنی دۆلۆر. Aliquip nulla enim veniam non fugiat id کوپیداتات نولا ئێلیت کوپیداتات کۆمۆدۆ ڤێلیت و ئییوسمۆد کوپیدات ئێلیت دۆلۆر.

بڕگەی 1-1

Amet tempor mollit aliquip pariatur جگە لە کۆمۆدۆ do ea cillum commodo Lorem و occaecat elit qui et. Aliquip labore ex ex esse voluptate occaecat لۆرێم ئولامکۆ deserunt. ئەلیکوا سیلوم ئیکسێکتۆر irure consequat id quis ea. دانیشتن proident ullamco aute magna pariatur نۆسترۆد labore. Reprehenderit aliqua commodo eusmod aliquip est do duis amet proident magna consectetur consequat eu کۆمۆدۆ هەڵاتوو ناکویس. وەرزشی Enim aliquip ullamco adipisicing voluptate excepteur کەمترین وەرزش کەمترین کەمترین وەرزشی commodo adipisicing officia nisi adipisicing. Anim id duis qui consequat کاری چەوریکردن sint dolor elit cillum anim et fugiat.

بڕگەی 1-2

Cillum nisi deserunt magna eiusmod qui eiusmod velit voluptate pariatur laborum sunt enim. Irure laboris mollit consequat incididunt sint et culpa culpa incididunt adipisicing magna magna occaecat. Nulla ipsum cillum eiusmod sint elit excepteur ea labore enim consectetur in labore anim. Proident ullamco ipsum esse elit ut Lorem eiusmod dolor et eiusmod. Anim occaecat nulla in non consequat eiusmod velit incididunt.

Item 2

Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident.

Item 3

Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.

Item 3-1

Deserunt quis elit Lorem eiusmod amet enim enim amet minim Lorem proident nostrud. Ea id dolore anim exercitation aute fugiat labore voluptate cillum do laboris labore. Ex velit exercitation nisi enim labore reprehenderit labore nostrud ut ut. Esse officia sunt duis aliquip ullamco tempor eiusmod deserunt irure nostrud irure. Ullamco proident veniam laboris ea consectetur magna sunt ex exercitation aliquip minim enim culpa occaecat exercitation. Est tempor excepteur aliquip laborum consequat do deserunt laborum esse eiusmod irure proident ipsum esse qui.

Item 3-2

Labore دانیشتن culpa commodo elit adipisicing دانیشتن aliquip elit proident voluptate کەمترین mollit nostrud aute reprehenderit بکە. Mollit excepteur eu Lorem ipsum anim commodo sint labore لۆرێم لە وەرزشکردن velit incididunt. Occaecat consectetur nisi لە occaecat proident minim enim sunt reprehenderit وەرزشکردن cupidatat et do officia. Aliquip consequat ad laboure کاری مۆلیت ut amet. دانیشتن لە ڤینیام کولپا ئەلیکوا جگە لە ئیلیت ماگنا فوجیات ئییوسمۆد ئەمێت ئۆفیسیا.

<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>

نموونە لەگەڵ list-group

هەروەها Scrollspy لەگەڵ .list-groups کاردەکات. ناوچەی تەنیشت گروپی لیستەکە بچۆ و سەیری گۆڕانی پۆلی چالاک بکە.

بڕگەی یەکەم بڕگەی دووەم بڕگەی سێیەم بڕگەی 4

بڕگەی یەکەم

بڕگەی دووەم

کویس ماگنا لۆرێم ئەنیم ئەمێت ئیپسوم دو مۆلیت سیت سیلوم voluptate ex nulla tempor. لابۆرۆم کۆنسێکوات نۆ ئێلیت ئینیم وەرزشکردن سیلوم ئەلیکوا کۆنسێکوات id ئەلیکوا. Esse ex consectetur mollit voluptate ئیست لە دویس لابۆریس بە ئیپسوم ئەنیم لۆرێم. ڕوداوی ڤینیام ڤێلیت ئێلیت ئێلیت ڤێنیام لۆرێم ئەلیکوا کویس ئولامکۆ دیسێرۆنت سیت ئێنیم ئێلیت ئەلیکوا ئێس ئیروری. لابۆرۆم نیسی سیت ئێست پۆپۆڕ لابەرۆم مۆلیت لابەر ئۆفیسیا لابۆرۆم ئیکسپێکتۆر کۆمۆدۆ نا کۆمۆدۆ دۆلۆر ئیکسپێکتۆر کۆمۆدۆ. ئیپسوم هەڵاتن ex est consectetur ئیپسوم کۆمۆدۆ tempora sunt لە proident.

بڕگەی سێیەم

کویس ئەنیم سیت دۆ ئەمێت فوجیات دۆلۆر ڤێلیت سیت ea ea do reprehenderit culpa duis. نۆسترۆد ئەلیکوا ئیپسوم فوجیات مینیم پرۆیێنت ئۆکایکات جگە لە ئەلیکویپ کولپا ئاوت پۆپۆڕ ڕیپرێهێندێریت. Deserunt tempor mollit elit ex pariatur دۆلۆر ڤێلیت هەڵاتوو مۆلیت کولپا ئیرور ئولامکۆ ئێست ئێکس ئولامکۆ ئیستێکتۆر.

بڕگەی 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>). پاشان data-targetتایبەتمەندییەکە زیاد بکە لەگەڵ ID یان پۆلی توخمە باوکەکەی هەر .navپێکهاتەیەکی Bootstrap.

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;لە CSS ـەکەتدا، لە ڕێگەی جاڤاسکڕێپتەوە پەیوەندی بە scrollspy بکە:

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

ئامانجی ناسنامەی چارەسەرکراو پێویستە

بەستەرەکانی ناوبار دەبێت ئامانجی id چارەسەرکراویان هەبێت. بۆ نموونە، a <a href="#home">home</a>دەبێت لەگەڵ شتێکدا بگونجێت لە DOM وەک <div id="home"></div>.

`:visible`توخمە نائامانجەکان پشتگوێ دەخرێن

ئەو توخمانەی ئامانج کە :visibleبەپێی jQuery نین پشتگوێ دەخرێن و بابەتە nav ی هاوبەشیان هەرگیز تیشک ناخرێنە سەر.

شێوازەکان

`.scrollspy('refresh')`

لەکاتی بەکارهێنانی scrollspy لەگەڵ زیادکردن یان لابردنی توخمەکان لە DOM، پێویستە بەم شێوەیە بانگی شێوازی نوێکردنەوە بکەیت:

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

`.scrollspy('dispose')`

سکڕۆڵسپی توخمێک لەناو دەبات.

بژاردەکان

دەتوانرێت هەڵبژاردنەکان لە ڕێگەی تایبەتمەندییەکانی داتا یان جاڤاسکڕێپتەوە تێپەڕێنرێت. بۆ تایبەتمەندیەکانی داتا، ناوی هەڵبژاردنەکە زیاد بکە بۆ data-, وەک لە data-offset="".

ناو	جۆر	بنەڕەتی	وەسف
ئۆفسێت	ژماره‌	10. 10	پێکسڵەکان بۆ ئۆفسێت لە سەرەوە لەکاتی حیسابکردنی شوێنی سکڕۆڵ.
ڕێگا	ڕستە	auto	دەدۆزێتەوە کە توخمە سیخوڕکراوەکە لە کام بەشدایە. `auto`باشترین ڕێگە هەڵدەبژێرێت بۆ بەدەستهێنانی کۆئۆردینیاتی سکڕۆڵ. `offset`شێوازی ئۆفسێتی jQuery بەکاردەهێنێت بۆ بەدەستهێنانی کۆئۆردینیاتی سکڕۆڵ. `position`شێوازی شوێنی jQuery بەکاردەهێنێت بۆ بەدەستهێنانی کۆئۆردینیاتی سکڕۆڵ.
ئامانج	ڕستە		توخمێک دیاری دەکات بۆ جێبەجێکردنی پێوەکراوەکەی Scrollspy.

ڕووداوەکان

جۆری ڕووداو	وەسف
چالاک بکە.bs.scrollspy	ئەم ڕووداوە هەرکاتێک شتێکی نوێ لەلایەن scrollspy چالاک بوو، ئاگر لە توخمە سکڕۆڵەکە دەکات.

$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})

سکڕۆڵسپی

چۆن کاردەکات

نموونە لە navbar

@قەڵەو

@mdo

one

two

three

نموونە لەگەڵ nested nav

بڕگەی یەکەم

بڕگەی 1-1

بڕگەی 1-2

Item 2

Item 3

Item 3-1

Item 3-2

نموونە لەگەڵ list-group

بڕگەی یەکەم

بڕگەی دووەم

بڕگەی سێیەم

بڕگەی 4

بەکارهێنان

لە ڕێگەی تایبەتمەندییەکانی داتا

لە ڕێگەی جاڤاسکڕێپتەوە

ئامانجی ناسنامەی چارەسەرکراو پێویستە

:visibleتوخمە نائامانجەکان پشتگوێ دەخرێن

شێوازەکان

.scrollspy('refresh')

.scrollspy('dispose')

بژاردەکان

ڕووداوەکان

`:visible`توخمە نائامانجەکان پشتگوێ دەخرێن

`.scrollspy('refresh')`

`.scrollspy('dispose')`