افزونه Scrollspy بوت استرپ

پلاگین Scrollspy به طور خودکار لینک ها را در یک لیست ناوبری بر اساس موقعیت اسکرول بروزرسانی می کند.

مقالات

چگونه یک 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>

...

<li><a href="#section1">Section 1</a></li>

...

</nav>

<h1>Section 1</h1>

<p>Try to scroll this page and look at the navigation bar while scrolling!</p>

</div>

...

</body>

توضیح مثال:

اضافه کردن data-spy = “scroll” به عنصری که باید به عنوان ناحیه رونده استفاده شود (اغلب این عنصر <body> است).
سپس خصیصه data-target را با مقدار id یا نام کلاس نوار ناوبری (.navbar) اضافه کنید. برای این است که مطمئن شوید نوار ناوبری به منطقه رونده (scrollable) متصل است.

توجه داشته باشید که عناصر رونده scrollable باید با id های لینک های موجود در لیست منوناوبری (<div id = “section1″> match <a href=”#section1”>) مطابقت داشته باشند.

ویژگی اختیاری data-offcet مشخص کننده تعداد پیکسل ها است که هنگام محاسبه موقعیت پیمایش، از بالای صفحه جبران می شود. این زمانی کاربرد دارد هنگامی که شما احساس می کنید که لینک در داخل نوار ناوبری حالت موقعیت فعال نزدیک باشد یا به سرعت تغییر کند وقتی که از ری منطقه رونده می پرد را تغییر میدهند.

[highlight color=”yellow”]نیاز به موقعیت نسبی: عنصر با data-spy = “scroll” نیاز به ویژگی موقعیت موقعیت CSS دارد، با مقدار “relative” به درستی کار می کند.[/highlight]

منو عمودی Scrollspy

در این مثال، ما از قرص های ناوبری عمودی Bootstrap به عنوان منو استفاده می کنیم:

مثال:

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

<li><a href="#section1">Section 1</a></li>

...

</ul>

</nav>

<h1>Section 1</h1>

<p>Try to scroll this page and look at the navigation list while scrolling!</p>

</div>

...

</div>

</body>

Rate this post

افزونه Scrollspy بوت استرپ

چگونه یک Scrollspy بوت استرپ ایجاد کنیم؟

منو عمودی Scrollspy

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

چگونه یک Scrollspy بوت استرپ ایجاد کنیم؟

منو عمودی Scrollspy

مطالب زیر را حتما مطالعه کنید

افزونه و کلاس Carousel در بوت استرپ bootstrap

کلاس collapse در بوت استرپ bootstrap

کلاس jumbotron در بوت استرپ

فیلترهای بوت استرپ

افزونه Affix بوت استرپ

افزونه Popover بوت استرپ

دیدگاهتان را بنویسید لغو پاسخ