in English

Scrollspy

به طور خودکار ناوبری بوت استرپ یا اجزای گروه لیست را بر اساس موقعیت اسکرول به روز کنید تا مشخص کنید کدام پیوند در حال حاضر در نمای نمایش فعال است.

چگونه کار می کند

Scrollspy برای عملکرد صحیح چند الزام دارد:

  • اگر جاوا اسکریپت ما را از منبع می‌سازید، به آن نیاز داردutil.js .
  • باید در یک جزء ناوبری بوت استرپ یا گروه لیست استفاده شود.
  • 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>

مثال با ناوبری تو در تو

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

محتوای نگهدارنده مکان برای مثال گروه فهرست اسکرول. این یکی به مورد 1 مربوط می شود. نیازی به عذرخواهی نیست. حالا ترسی نیست، رها کن و فقط آزاد باش، من تو را بی قید و شرط دوست خواهم داشت. شب جمعه گذشته یک آدم خجالتی نباش شرط می بندم زیباست. تابستان بعد از دبیرستان وقتی برای اولین بار همدیگر را دیدیم. چون او موز و هنرمند است. چی؟ صبر کن. فکر می کردم من استثنا هستم.

مورد 2

محتوای نگهدارنده مکان برای مثال گروه فهرست اسکرول. این یکی به مورد 2 مربوط می شود. آره، او با ضربان خودش می رقصد. وای نه. تو می توانستی بهترین باشی 'برای این که تو یه پا آتیشپارهای عزیزم. شاید دلیلی برای بسته بودن همه درها باشد. قلبت را باز کن و بگذار شروع شود. خیلی شیک، آره، او یک کلاسیک است.

مورد 3

محتوای نگهدارنده مکان برای مثال گروه فهرست اسکرول. این یکی به مورد 3 مربوط می شود. ما بالاتر و بالاتر می رویم. هرگز یکی بدون دیگری، ما پیمان بستیم. من در هوا قدم میزنم. یکی گفت تو خالکوبیتو پاک کردی حالا مثل یک پروانه شناورم. تن، برنزه مناسب و آماده است، آن را بالا ببرید و باعث سنگین شدن آن شود. چون یک بار مال منی، یک بار مال منی. شما فقط باید نور را روشن کنید و بگذارید بدرخشد! بنابراین به بلوار زدیم. آیا تا به حال احساس می کنید، احساس کنید که کاغذ آنقدر نازک است. من همه را می بینم، اکنون می بینم.

مورد 4

محتوای نگهدارنده مکان برای مثال گروه فهرست اسکرول. این یکی مربوط به مورد 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جزء 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' })

اهداف شناسایی قابل حل مورد نیاز است

پیوندهای نوار ناوبری باید دارای اهداف شناسایی قابل حل باشند. برای مثال، <a href="#home">home</a>باید با چیزی در DOM مطابقت داشته باشد مانند <div id="home"></div>.

عناصر غیر :visibleهدف نادیده گرفته شدند

عناصر هدف که :visibleمطابق با jQuery نیستند نادیده گرفته می شوند و موارد ناو مربوطه آنها هرگز برجسته نمی شوند.

مواد و روش ها

.scrollspy('refresh')

هنگام استفاده از scrollspy همراه با افزودن یا حذف عناصر از DOM، باید متد Refresh را به این صورت فراخوانی کنید:

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

.scrollspy('dispose')

Scrollspy یک عنصر را از بین می برد.

گزینه ها

گزینه ها را می توان از طریق ویژگی های داده یا جاوا اسکریپت منتقل کرد. data-برای ویژگی های داده، نام گزینه را به مانند در ضمیمه کنید data-offset="".

نام تایپ کنید پیش فرض شرح
انحراف عدد 10 هنگام محاسبه موقعیت پیمایش، پیکسل‌هایی که باید از بالا جابجا شوند.
روش رشته خودکار پیدا می کند که عنصر جاسوسی در کدام بخش قرار دارد. autoبهترین روش را برای دریافت مختصات اسکرول انتخاب می کند. offsetاز متد jQuery offset برای بدست آوردن مختصات اسکرول استفاده خواهد کرد. positionاز روش موقعیت جی کوئری برای دریافت مختصات اسکرول استفاده خواهد کرد.
هدف رشته | شی jQuery | عنصر DOM عنصری را برای اعمال افزونه Scrollspy مشخص می کند.

مناسبت ها

نوع رویداد شرح
activate.bs.scrollspy هر زمان که یک مورد جدید توسط scrollspy فعال شود، این رویداد روی عنصر اسکرول فعال می شود. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})