آموزش ساخت نویگیشن بار چسبنده در HTML

ساخت نویگیشن بار چسبنده در HTML
(Sticky Navbar)

در وبسایت‌های مختلفی ممکن است منویی در بالای سایت و بخش هدر مشاهده کنید که با رفتن ماوس روی گزینه‌های آن، منوی‌های تودرتوی دیگری نیز برایتان باز شود. نمونه‌ی ساده‌ای از این‌گونه‌ منوها را در هدر فول کده مشاهده می‌کنید (البته در نسخه دسکتاپ) که گزینه‌هایی درون آن قرار دارد. و حالا نکته اینجاست که در برخی از وبسایت‌ها، با اسکرول کردن به سمت پایین، گویی این منو از جایش کنده شده و به بالای صفحه می‌چسبد و این باعث می‌‍شود تا کاربر همیشه آن را مشاهده کند! سپس با اسکرول به بالای صفحه، منو سرجای خود قرار می‌گیرد.

برای ساخت این حالت، تکنیک‌ها و روش‌های متنوعی از جمله استفاده از جی‌‌کوئری وجود دارد؛ اما ما در اینجا، قصد نداریم تا از ابزار دیگری استفاده کنیم و کار خود را تنها با CSS و جاوا اسکریپت خالص جلو خواهیم برد.

مراحل انجام کار

فرض کنیم در هدر خود، یک navbar به صورت زیر ایجاد کرده‌ایم:

 <div id="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
</div>

سه گزینه در این منو قرار دادیم. Home و News و Contact
و در ادامه، استایل CSS زیر را برای Navbar در نظر می‌گیریم:

#navbar {
  overflow: hidden;
  background-color: #333;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

.content {
  padding: 16px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 60px;
}

و کد جاوا اسکریپت خود را نیز به صورت زیر می‌نویسیم:

window.onscroll = function() {myFunction()};

var navbar = document.getElementById("navbar");

var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

یک تابع برای رویداد onscroll آبجکت window مشخص می‌کنیم. در واقع window آبجکت مربوط به پنجره‌ی فعلی بوده و ما مشخص می‌کنیم که هنگام اسکرول شدن (چه اسکرول به بالا و چه پایین)، تابع myFunction اجرا شود. در ادامه، المنت مربوط به navbar را از طریق آیدی آن می‌گیریم. سپس مقدار انحراف یا فاصله‌ی navbar از بالای صفحه را به دست آورده و آن را درون متغیری به نام sticky قرار می‌دهیم. در واقع از روی این فاصله می‌خواهیم بفهمیم که در زمان اسکرول، منو مخفی شده است یا خیر؛ و اگر مخفی شد، آن را برگردانیم.

داخل تابع myFunction، بررسی می‌کنیم که اگر مقدارY اسکرول پنجره، بیشتر از فاصله‌ی اولیه‌ی navbar از بالای صفحه بود (بیشتر از Sticky)، یعنی منو در حال کشیده شدن به زیر پنجره بوده و کم‌کم مخفی می‌شود. و اگر چنانچه اسکرول کم‌تر از این حد بود، یعنی به محل اولیه‌ی منو در پنجره برگشته‌ایم.

بنابراین، وقتی اسکرول از منو رد شده و به سمت پایین رفت، در همان لحظه یک کلاس CSS به نام sticky به المنت منو اضافه می‌کنیم و چنانچه اسکرول به بالا رفته و به محل منو رسید، این کلاس را حذف می‌کنیم. حالا این کلاس چه ویژگی‌ای دارد که مشکل ما را حل کند؟!

در کلاس sticky، مقدار ویژگی position برابر fixed قرار داده شده است که خارج از وابسته بودن المنت، به هر المنت دیگری می‌شود؛ و این یعنی، المنت تنها وابسته به ابعاد صفحه، محل قرار گیری خود را مشخص می‌کند و بدین منظور، روی المنت‌های دیگر ترسیم می‌شود. ویژگی دیگر top هست که فاصله از بالا را 0 قرار داده‌ایم؛ و در نهایت عرض منو را 100 کرده‌ایم. بقیه موارد هم دلخواه می‌باشند.

همانطور که دیدید، برای ساخت یک نویگیشن‌منوی چسبنده، نیازی به استفاده از جی‌کوئری و … نبود و به سادگی این قابلیت را نوشتیم.

ممکن است مواقعی به خاطر افتادن چندین المنت روی هم، منو دیده نشود! برای اطمینان از دیده شدن منو، می‌توانید به آن ویژگی z-index برابر 100 یا 1000 را بدهید. در واقع این ویژگی مشخص می‌کند که المنت در محور z در چه عمقی قرار گیرد و هرچقدر که این عدد بیشتر باشد، منو جلوتر از بقیه خواهد بود.و طبیعتا اگر عدد دو المنت یکسان باشد، اولویت با المنتی است ک دیرتر از بقیه در صفحه چاپ شده و بدین دلیل، روی المنت‌های قبلی ترسیم می‌شود.

کد کامل

کد زیر، نمونه کاملی از توضیحات بالا می‌باشد که می‌توانید آن را تست کنید.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
  font-size: 28px;
  font-family: Arial, Helvetica, sans-serif;
}

.header {
  background-color: #f1f1f1;
  padding: 30px;
  text-align: center;
}

#navbar {
  overflow: hidden;
  background-color: #333;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}

#navbar a.active {
  background-color: #4CAF50;
  color: white;
}

.content {
  padding: 16px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 60px;
}
</style>
</head>
<body>

<div class="header">
  <h2>فول کده</h2>
  <p>دهکده رویاهای شما</p>
</div>

<div id="navbar">
  <a class="active" href="javascript:void(0)">Home</a>
  <a href="javascript:void(0)">News</a>
  <a href="javascript:void(0)">Contact</a>
</div>

<div class="content">
  <h3>Sticky Navbar</h3>
  <p>FuLLKade.COM</p><p>FuLLKade.COM</p><p>FuLLKade.COM</p><p>FuLLKade.COM</p>
  <p>FuLLKade.COM</p><p>FuLLKade.COM</p><p>FuLLKade.COM</p><p>FuLLKade.COM</p>
  <p>FuLLKade.COM</p><p>FuLLKade.COM</p><p>FuLLKade.COM</p><p>FuLLKade.COM</p>
  <p>FuLLKade.COM</p><p>FuLLKade.COM</p><p>FuLLKade.COM</p><p>FuLLKade.COM</p>
  <p>FuLLKade.COM</p><p>FuLLKade.COM</p><p>FuLLKade.COM</p><p>FuLLKade.COM</p>
  <p>FuLLKade.COM</p><p>FuLLKade.COM</p><p>FuLLKade.COM</p><p>FuLLKade.COM</p>
  <p>FuLLKade.COM</p><p>FuLLKade.COM</p><p>FuLLKade.COM</p><p>FuLLKade.COM</p>
  <p>FuLLKade.COM</p><p>FuLLKade.COM</p><p>FuLLKade.COM</p><p>FuLLKade.COM</p>
  <p>FuLLKade.COM</p><p>FuLLKade.COM</p><p>FuLLKade.COM</p><p>FuLLKade.COM</p>
  <p>FuLLKade.COM</p><p>FuLLKade.COM</p><p>FuLLKade.COM</p><p>FuLLKade.COM</p>
  <p>FuLLKade.COM</p><p>FuLLKade.COM</p><p>FuLLKade.COM</p><p>FuLLKade.COM</p>
  <p>FuLLKade.COM</p><p>FuLLKade.COM</p><p>FuLLKade.COM</p><p>FuLLKade.COM</p>
  <p>FuLLKade.COM</p><p>FuLLKade.COM</p><p>FuLLKade.COM</p><p>FuLLKade.COM</p>
  <p>FuLLKade.COM</p><p>FuLLKade.COM</p><p>FuLLKade.COM</p><p>FuLLKade.COM</p>
</div>

<script>
window.onscroll = function() {myFunction()};

var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}
</script>

</body>
</html>

آموزش ساخت نویگیشن بار چسبنده در HTML

مراحل انجام کار

کد کامل

پاسخ دهید لغو پاسخ

نظرات ثبت شده بدون دیدگاه

مراحل انجام کار

کد کامل

مطالب پشنهادی

پاسخ دهید لغو پاسخ

نظرات ثبت شده بدون دیدگاه