با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش Bootstrap 3 را دنبال می کنند. در این آموزش قصد داریم تا شما را با یک پلاگین در فریم ورک bootstrap 3، که شباهت زیادی به پلاگین scrollspy در bootstrap 3 دارد آشنا کنیم. این پلاگین Affix نام دارد. و تفاوت عمده ی این پلاگین با scrollspy در این است که با حرکت نوار scroll به سمت پایین یا بالای صفحه حرکت می کند. و پس از رسیدن به بالاترین یا پایین ترین بخش صفحه وب، در آن بخش قفل می شود. و می توانید مانند پلاگین scrollspy، با استفاده از گزینه های Affix بین صفحات و بخش های مختلف وب سایت جابه جا شوید. در ادامه ی آموزش فوق برای آشنایی با پلاگین Affix در Bootstrap 3 و ترکیب پلاگین های Affix و scrollspy با ما همراه باشید.
پلاگین Affix باعث می شود که عناصر آن، در بخشی از صفحه وب قفل شود(جا به جا نمی شود). و اغلب از یک منوی navigation یا button با آیکون های خاصی برای جابه جایی بین صفحات وب سایت تشکیل شده است.
پلاگین Affix رفتار خود را فعال و غیر فعال می کند(با تغییر مقدار CSS position
ازstatic
به fixed
).
این بستگی به موقعیت محل scroll دارد.
با استفاده از Affix، زمانی که ما به بالا و پایین صفحه می رویم، این منو همیشه قابل مشاهده و قفل شده در موقعیت مورد نظر است.
مثال زیر چگونگی ایجاد یک منوی Affix افقی را نشان می دهد:
1 | <nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197"> |
کد مثال زیر، یک منوی Affix عمودی را ایجاد می کند:
1 | <ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205"> |
شرح کد فوق:
صفت data-spy=”affix” باید به عنصری که قرار است تبدیل به Affix شود، اضافه گردد.
صفت data-offset-top|bottom نیز برای تشخیص موقعیت scroll صفحه استفاده می شود.
چگونگی عملکرد:
منوی affix از سه کلاس .affix
, .affix-top
و .affix-bottom
برای تشخیص محل قفل شدن در صفحه استفاده می کند.
می توانید با دستکاری position:fixed
در کلاس .affix
موقعیت و رفتار را تغییر دهید.
در زمان پیماش نوار اسکرول، affix کلاسهای .affix-top
یا.affix-bottom
را با کلاس .affix
جایگزین می کند.
همچنین صفت position:absolute
برای مواقع ضروری اضافه شده است.
می توانید پلایگن های scrollspy و Affix را با یکدیگر ترکیب کنید:
1 2 3 4 5 6 7 | <body data-spy="scroll" data-target=".navbar" data-offset="50"> <nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197"> ... </nav> </body> |
1 2 3 4 5 6 7 8 | <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 که موضوع آموزش این جلسه بود. شباهت زیادی به عملکرد پلاگین scrollspy دارد. شما می توانید با ترکیب این دو ویژگی در bootstrap 3 یک منوی کامل در وب سایت خود ایجاد کنید. امیدواریم که مباحث آموزش آشنایی با پلاگین Affix در Bootstrap 3 مورد توجه شما قرار گرفته باشد.