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

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

به کمک پلاگین Affix یک عنصر می‌تواند به یک ناحیه در صفحه چسبانده شود (در یک ناحیه ثابت شود). این پلاگین اغلب با منوی‌های Navigation یا کلیدهای آیکون‌های اجتماعی (Social Icon) به کار می‌رود تا آنها هنگام پیمایش به بالا و پایین در ناحیه ای خاص «چسبانده» شوند.[۱]

پلاگین این رفتار را بر اساس مکان scroll فعال و غیرفعال می‌کند (با تغییر مقدار CSS position از static به fixed).

مثال 1) Navbar ثابت شده:

مثال 2) Sidebar ثابت شده:

با Affix، هنگام پیمایش به پایین و بالای صفحه، همیشه منوی در قابل مشاهده و در مکان خود ثابت است.

روش ایجاد یک منوی Navigation ثابت

مثال زیر نحوهٔ ایجاد منوی Navigation ثابت افقی را نشان می‌دهد:

مثال

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">


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


مثال زیر نحوه ایجاد منوی Navigation ثابت عمودی را نشان می‌دهد:

مثال

<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">


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


توضیح مثال

به عنصری که قرار است ثابت شود، data-spy="affix" را اضافه کنید.

بطور دلخواه ویژگی data-offset-top را برای محاسبه مکان Scroll اضافه کنید.

چگونه عمل می‌کند

پلاگین Affix بین سه کلاس تغییر وضعیت می‌دهد: .affix ،.affix-top و .affix-bottom هر کلاس نشان دهندهٔ یک حالت خاص است. ویژگی‌های CSS باید برای مدیریت مکان‌های واقعی اضافه شوند به استثناء position:fixed در کلاس .affix.

  • این پلاگین کلاس ..affix-top یا .affix-bottom را برای نشان دادن عنصری که در بالاترین یا پایین‌ترین مکان آن است اضافه می‌کند. تعیین مکان با CSS در این مرحله نیاز نیست
  • پیمایش عنصر ثابت شده، باعث راه اندازی Affixing واقعی می‌شود- این زمانی است که پلاگین کلاس .affix-top یا .affix-bottom را با کلاس .affix جایگزین می‌کند (position:fixed را تنظیم می‌کند). در این هنگام باید ویژگی سی‌اس‌اس top یا bottom را به مکان عنصر ثابت شده در صفحه اضافه کنید
  • اگر یک فاصلهٔ پایین (Bottom Offset) تعیین شد، هنگام عبور Scroll از آن، کلاس .affix را با .affix-bottom جایگزین می‌کند. از آنجایی که فاصله‌ها اختیاری هستند، تنظیم یک فاصله نیازمند تنظیم CSS مناسب است. در این حالت، در صورت لزوم position:absolute را اضافه کنید

در اولین مثال بالا، هنگامی که ۱۹۷ پیکسل از بالا پیمایش کنیم، پلاگین Affix کلاس .affix (position:fixed) را به عنصر<nav> اضافه می‌کند. اگر مثال را باز کنید، خواهید دید که ویژگی CSS top را با مقدار صفر به کلاس .affix اضافه کردیم. این کار برای این است که مطمئن شویم وقتی ۱۹۷ پیکسل از بالا پیمایش می‌کنیم، Navbar همیشه در بالای صفحه می‌ماند.

Scrollspy و Affix

استفاده از پلاگین Affix به همراه پلاگین Scrollspy:

منوی افقی (Navbar)

<body data-spy="scroll" data-target=".navbar" data-offset="50">

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
...
</nav>

</body>


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


منوی عمودی (Sidenav)

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

<nav class="col-sm-3" id="myScrollspy">
  <ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
  ...
</nav>

</body>


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


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

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

منابع آموزشی