آموزش کار با پلاگین Scrollspy در بوت استرپ

آموزش کار با پلاگین Scrollspy در بوت استرپ

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

آموزش کار با پلاگین Scrollspy در بوت استرپ در ادامه مطلب، لطفا با ما همراه باشید…

آموزش کار با پلاگین 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>

مشاهده مثال دیگر به همراه دمو

توضیح مثال قبل :

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

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

خاصیت افتخاری data-offset تعداد پیکسل ها را برای افست از بالا  هنگام محاسبه موقعیت اسکرول تعیین میکند . وقتی به کار می اید که احساس میکنید. هنگام پرش بین عنصر های قابل پیمایش ، لینک های درون navbar خیلی زود تغییر می کنند. میزان پیش فرض 10pixels می باشد.

نیازمند موقعیت دهی نسبی ست : عنصر حاوی 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>

مشاهده مثال دیگر به همراه دمو

 

به این مطلب امتیاز دهید post

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.

پکیج آموزش پروژه محور لاراول و طراحی وب سایت کانون قلم چی

دسته بندی موضوعات

آخرین محصولات فروشگاه

مشاهده همه

نظرات

بازخوردهای خود را برای ما ارسال کنید

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.