آموزش ساخت منوی چسبنده ( Sticky Menu ) بدون جاوا اسکریپت
  • خانه
  • بلاگ
  • آموزش ساخت منوی چسبنده ( Sticky Menu ) بدون جاوا اسکریپت

آموزش ساخت منوی چسبنده ( Sticky Menu ) بدون جاوا اسکریپت

36 1
۱۳۹۹/۰۸/۱۲

امروز با آموزش ساخت منوی چسبنده در خدمت شما هستیم حتما تو خیلی از سایت ها دیدین که وقتی اسکرول میکنید منو به بالای صفحه میچسبه. خوب خیلی از دوستان این کار رو با جاوا اسکریپت با jquery انجام میدن.

منظورم کار زیر هستش:

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

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

کلید این کار بدون جاوا اسکریپت position: sticky هستش ولی چطوری تنظیمش کنیم تا کار کنه چون فقط با زدن این خاصیت به کلاس navbar شما کار نمیکنه.

بسیاری از مرورگر های جدید از sticky پشتیبانی میکنند با این حال مراقب باشید و حتما تو مرورگر های متفاوت تست کنید.

خوب حالا نوبت اضافه کردن کد css به نوبار شماست:

.navbar {
  position: sticky;
  top: 0;
}

اگه توجه کرده باشید فقط با 2 خط ما به اون چیزی که میخاستیم رسیدیم کافیه تست کنید :)

حالا بیاین یه درصد احتمال بدیم دوست داشتین با جاوا اسکریپت اینکار رو بکنید اونوقت چی؟ خوب میتونین از روش زیر استفاده کنید.

ساخت منوی چسبنده با جاوا اسکریپت

const navbar = document.querySelector('.navbar');
let sticky = navbar.offsetTop;
const navbarScroll = () => {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add('sticky')
  } else {
    navbar.classList.remove('sticky');
  }
};

window.onscroll = navbarScroll;

حالا تو قسمت css هم باید تکه کد زیر رو اضافه کنید:

.navbar {
  position: relative;
}
.sticky {
  position: fixed;
  top: 0;
  left: 0;
}

کار ما با آموزش ساخت منوی چسبنده ( Sticky Menu ) بدون جاوا اسکریپت تمام شد نظرتون درباره این پست چی بود؟

9 برنامه نویسی وب
ساخت اشکال مختلف با استفاده از CSS

ساخت اشکال مختلف با استفاده از CSS

تقریبا با css میشه خیلی از اشکال هایی که فکرش رو نمیکنین بسازین برای همین با آموزش ساخت اشکال مختلف با استفاده از CSS در خدمت شما هستیم. ساخت اشکال مختلف یا shape ها بسیار ساده هستن و معمولا با border ها درست میشن یا بعضی از جاها از before و after استفاده میکنیم. مهم […]

در حال پاسخ به: ایمان آقاپور
نمایش پیام ها
reza ۱۳۹۹/۰۸/۱۹

آموزش خوبی بود ممنون از شما.

ثبت درخواست مشاوره

logo mihandesign

بزودی با شما تماس خواهیم گرفت

شماره تماس: 09024184107
پست الکرونیک: support@mihandesign.com
عملیات موفق آمیز بود
عملیات ناموفق بود