پلاگین Scrollspy (پیشرفته)

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو

پلاگین Scrollspy برای بروز رسانی خودکار لینک‌ها در یک لیست Navigation براساس مکان پیمایش (Scroll) به کار می‌رود.[۱]

نحوهٔ ایجاد Scrollspy

مثال زیر نحوه ایجاد یک Scrollspy را نشان می‌دهد:

مثال

<!-- The scrollable area -->
<body data-spy="scroll" data-target=".navbar" data-offset="50">

<!-- The navbar - The <a> elements are used to jump to a section in the scrollable area -->
<nav class="navbar navbar-inverse navbar-fixed-top">
...
  <ul class="nav navbar-nav">
    <li><a href="#section1">Section 1</a></li>
    ...
</nav>

<!-- Section 1 -->
<div id="section1">
  <h1>Section 1</h1>
  <p>Try to scroll this page and look at the navigation bar while scrolling!</p>
</div>
...

</body>


مشاهدهٔ نتیجه


توضیح مثال

data-spy="scroll" را به عنصری که قرار است به عنوان مکان قابل پیمایش (Scrollable) استفاده شود، اضافه کنید (اغلب، این عنصر <body> است).

سپس ویژگی data-target را با مقدار آی دی یا نام کلاس Navigation (به فارسی: نوار) (.navbar) اضافه کنید. این کار برای اطمینان از اتصال Navbar با مکان قابل پیمایش انجام می‌شود.

دقت کنید که عنصرها باید با آی دی لینکهای داخل آیتم‌های Navbar مطابقت داشته باشد (<div id="section1"> با <a href="#section1"> مطابقت داشته باشد).

ویژگی data-offset تعداد پیکسل‌های فاصله از بالا را هنگام محاسبه مکان Scroll تعیین می‌کند. این کار زمانی مفید است که احساس می‌کنید لینک‌های داخل Navbar حالت فعال را خیلی زود تغییر می‌دهند یا خیلی سریع هنگام پرش به عنصرهای قابل پیمایش. مقدار پیش فرض ۱۰ پیکسل است.

نیازمند مکان نسبی: عنصر data-spy="scroll" نیازمند ویژگی مکان CSS با مقدار “relative” است تا به درستی کار کند.

منوی عمودی Scrollspy

در این مثال از پیل‌های عمودی Navigation بوت استرپ بعنوان منو استفاده می‌کنیم:

مثال

<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">

  <div class="container">
    <div class="row">
      <nav class="col-sm-3" id="myScrollspy">
        <ul class="nav nav-pills nav-stacked">
          <li><a href="#section1">Section 1</a></li>
          ...
        </ul>
      </nav>
      <div class="col-sm-9">
        <div id="section1">
          <h1>Section 1</h1>
          <p>Try to scroll this page and look at the navigation list while scrolling!</p>
        </div>
        ...
      </div>
    </div>
  </div>

</body>


مشاهدهٔ نتیجه


مرجع کامل Scrollspy بوت استرپ

برای دستیابی به مرجع کامل همه امکانات Scrollspy، متدها و رویدادها، به مرجع Scrollspy JS بوت استرپ ما مراجعه کنید. .

منابع آموزشی