کی طرح بنایا جاتا ہے: چسپ/فیکس ناویگیشن بار

کہنا کس طرح ناٹوگار ناٹوگار بنایا جائیگا

پہلا قدم - ایچ تی ایم ایل جوڑیں:

ناٹوگار بنائیں:

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

دوسرا قدم - سی ایس ایس جوڑیں:

ناٹوگار کی تکنیک سیٹ کریں:

/* ناٹوگار کی تکنیک سیٹ کریں */
#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 کلاس جوڑی جائیگی */
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}
/* پیج کی سارکتی میں کچھ اوپر داخلی پرتا جوڑیں تاکہ ناٹوگار سائیڈ بار کو بغیر کسی بھی چلنے کی اجازت نہ دی جائی، کیونکہ ناٹوگار پیج کے اوپر نئی پوزیشن حاصل کر رہا ہے (پوزیشن:fixed اور top:0) */
.sticky + .content {
  padding-top: 60px;
}

تیسرا قدم - جاوااسکریپٹ جوڑیں:

// جب یوزر پیج پر سکرول کرتا ہے تو myFunction کا نفاذ کیا جائیگا
window.onscroll = function() {myFunction()};
// ناٹوگار حاصل کیا جائیگا
var navbar = document.getElementById("navbar");
// ناٹوگار کی پیمانے پرتا پائی جائیگی
var sticky = navbar.offsetTop;
// جب کی آپ ناٹوگار باری کی سیکشن پر پیمانے پر آپتا ہوتا ہے تو اس میں sticky کلاس جوڑی جائیگی۔ جب آپ اس سیکشن سے باہر آپتا ہوتا ہے تو sticky کلاس کو ہٹادیا جائیگا۔
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  }
    navbar.classList.remove("sticky");
  }
}

بايد خودتون امتحان کنين