آموزش Bootstrap جلسه سی و چهارم (Affix)

بازدید
17784

دسته بندی :آموزش Bootstrap,آموزش طراحی وب

در خدمت شما هستیم با آموزش Bootstrap جلسه سی و چهارم (Affix)

آموزش Bootstrap جلسه سی و چهارم (Affix) از سری آموزش های تک قسمتی است

سلام برنامه در این جلسه درباره فیکس کردن منو صحبت می کند

به عنوان مثال در سایت سلام برنامه منو ها به این روش ساخته شده اند

اگر شما صفحه را اسکرول کنید هر دو منو با اسکرول صفحه حرکت می کنند

از مزیت های Affix این است که میتوانید مقدار دهی کرده و بگویید وقتی اسکرول به کجا رسید فیکس شود

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

باکس های چسبان (Affix)

با توجه به توضیحات بالا باید فهمیده باشید که کاربرد affix چیست اما چرا میگوییم باکس چسبان ؟ چون این حالت تنها برای منو ها قابل استفاده نیست و شما میتوانید هر المان یا تگی را در صفحه با این قابلیت بوت استرپ پیاده سازی کنید. تنها کافیست نحوه اجرای و فعال سازی آن در بوت استرپ را یاد بگیرید که ما این مورد را در این آموزش به شما یاد میدهیم. در جلسه آموزش Bootstrap جلسه بیست و سوم (navbar) درباره ثابت بودن منو در صفحه و حرکت آن با اسکرول صحبت کردیم اما اگر منو در وسط صفحه بود دیگر از آن روش نمیتوانیم استفاده کنیم.

منو های چسبان

برای ساخت منو چسبان ما نیاز داریم تا از css نیز کمک بگیریم چرا که فاصله منو ما از بالا و پایین صفحه میتواند هر مقداری باشد پس ما باید این اندازه را تعیین کنیم. همچنین باید بگوییم که بعد ثابت شدن در کجای صفحه قرار گیرد پس کلاسی تعریف میکنیم با نام affix سپس با مقادیر top و bottom موقعیت منو خود و فاصله آن از بالا و پایین را در css تعیین میکنیم بد باید attribute با نام data-spy و مقدار کلاس ما یعنی affix تعریف کنیم.

اگر قرار است منو ما با اسکرول از بالای صفحه به صفحه بچسبد باید attribute با نام data-offset-top تعریف کنیم که مقدار عددی بر حسب پیکسل میگیرد به فرض اگر ما مقدار ۱۰۰ بدهیم با اسکرول از بالا به پایین به مقدار ۱۰۰ پیکسل منو چسبیده و در صفحه ثابت میشود. به همین سادگی شما یک منو چسبان ساختید برای واضح شدن موضوع میتوانید از کد های زیر که یک منو کامل با این قابلیت است استفاده کنید:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  <style>
  /* Note: Try to remove the following lines to see the effect of CSS positioning */
  .affix {
    top: 0;
    width: 100%;
    z-index: 9999 !important;
  }


  </style>
</head>
<body>

<div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;">
  <h1>Bootstrap Affix Example</h1>
  <h3>Fixed (sticky) navbar on scroll</h3>
  <p>Scroll this page to see how the navbar behaves with data-spy="affix".</p>
  <p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels.</p>
</div>

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Basic Topnav</a></li>
    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3</a></li>
  </ul>
</nav>

<div class="container-fluid" style="height:1000px">
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
</div>

</body>
</html>

منو های چسبان کناری (عمودی)

حال سوال اینجاست اگر منو ما عمودی بود چطور میتوانیم آن را در کنار صفحه ثابت کنیم عملا این کار با حالت افقی فرقی ندارد مجددا شما کلاس affix را به صورت attribute با نام data-spy به منو یا باکس خود میدهید سپس attribute با نام data-offset-top با مقدار عددی مد نظر اضافه میکنید تنها تفاوت این حالت این است که ممکن است این منو در اسلایدر باشد و اگر در کل صفحه اسکرول شود روی المان های دیگر نظیر footer برود برای این که این اتفاق نیفتد میتوانید attribute با نام data-offset-bottom با مقدار ارتفاع footer خود به آن بدهید مثلا شما فوتری با height به اندازه ۳۰۰ پیکسل دارید کافیست مقدار data-offset-bottom را ۳۰۰ قرار دهید که به محض رسیدن به فوتر از حالت چسبان خارج شود. برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  <style>
  /* Note: Try to remove the following lines to see the effect of CSS positioning */
  .affix {
    top: 20px;
    z-index: 9999 !important;
  }
  </style>
</head>
<body>

<div class="container-fluid" style="background-color:#2196F3;color:#fff;height:200px;">
  <h1>Bootstrap Affix Example</h1>
  <h3>Fixed (sticky) vertical sidenav on scroll</h3>
  <p>Scroll this page to see how the left navigation menu behaves with data-spy="affix".</p>
  <p><strong>The left menu sticks to the page when you have scrolled a specified amount of pixels.</strong></p>
</div>
<br>

<div class="container">
  <div class="row">
    <nav class="col-sm-3" data-spy="affix" data-offset-top="205" data-offset-bottom="1500">
      <ul class="nav nav-pills nav-stacked">
        <li class="active"><a href="#section1">Section 1</a></li>
        <li><a href="#section2">Section 2</a></li>
        <li><a href="#section3">Section 3</a></li>
      </ul>
    </nav>
    <div class="col-sm-9" style="height:5000px;">   
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
    </div>
  </div>
</div>

</body>
</html>

استفاده از حالت جیکوئری

اگر امکان اضافه کردن کد به صورت attribute را به قالب و کد های خود ندارید میتوانید از حالت جیکوئری استفاده کنید و تنها نام تگ مد نظر و کلاس آن را که میخواهید affix روی آن اعمال شود به جیکوئری بدهید . برای اجرای این حالت حتما باید کتابخانه جیکوئری در سایت شما قرار گرفته باشد اگر این کتابخانه را ندارید میتوانید از cdn آن استفاده کنید و کد زیر را در head سایت خود قرار دهید

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">

و یا این کتابخانه را از سایت jQuery دریافت و در قالب خود فراخوانی کنید.

در نهایت برای توجه شدن و درک بهتر از حالت جیکوئری میتوانید از کد زیر استفاده کنید:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  <style>
  /* Note: Try to remove the following lines to see the effect of CSS positioning */
  .affix {
    top: 20px;
  }
  </style>
</head>
<body>

<div class="container-fluid" style="background-color:#2196F3;color:#fff;height:200px;">
  <h1>Bootstrap Affix Example</h1>
  <h3>Fixed (sticky) vertical sidenav on scroll</h3>
  <p>Scroll this page to see how the left navigation menu behaves with data-spy="affix".</p>
  <p><strong>The left menu sticks to the page when you have scrolled a specified amount of pixels.</strong></p>
</div>
<br>

<div class="container">
  <div class="row">
    <nav class="col-sm-3">
      <ul class="nav nav-pills nav-stacked">
        <li class="active"><a href="#section1">Section 1</a></li>
        <li><a href="#section2">Section 2</a></li>
        <li><a href="#section3">Section 3</a></li>
      </ul>
    </nav>
    <div class="col-sm-9">   
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
    </div>
  </div>
</div>

<script>
$(document).ready(function(){
  $('.nav').affix({offset: {top: 205} }); 
});
</script>

</body>
</html>

می توانید دیگر قسمت ها را در لینک زیر ببینید

آموزش Bootstrap جلسه سی و سوم (Scrollspy)

آموزش Bootstrap جلسه سی و پنجم (Simple Template)

شما می توانید این آموزش را به صورت آنلاین از ویدیو زیر ببینید

و یا آن را در آپارات ببینید

همچنین در صورت علاقه می توانید این آموزش را از باکس دانلود موجود در زیر همین پست دانلود نمایید

سلام برنامه | HiProgram

مرجع آموزش برنامه نویسی وب و اندروید

مطالب پربازدید

آخرین ارسالی ها

آموزش رفع محدودیت سایز آپلود در وردپرس

آموزش Bootstrap 4 جلسه بیست و هشتم (ScrollSpy)

آموزش Bootstrap 4 جلسه بیست و هفتم (popover)

آموزش Bootstrap 4 جلسه بیست و ششم (Tooltip)

آموزش Bootstrap 4 جلسه بیست و پنجم (Modal)

پکیج های آموزشی

پکیج طراحی قالب وردپرس

اتوماتیک کردن کارها در وردپرس

پکیج طراحی قالب جوملا ۳

آموزش تصویری html5

آموزش تصویری css3