منوی چسبنده سایت؛ نمایش منو به شرط اسکرول بالا

یکی از مهم ترین بخش های یک وب سایت منو ناوبری آن است. در این مطلب درباره مزیت های منوی چسبنده سایت صحبت می کنیم.

منوی سایت یکی از مهم ترین بخش ها برای کاربران است. در این بخش کاربر امکان جابجایی بین صفحات مهم وب سایت ما را دارد. در طراحی های امروزی نیز بیشتر طراحان دکمه های ورود و جستجو را نیز در این بخش قرار می دهند. لذا کاربران به صورت مرتب به این بخش از سایت ما سر می زنند. به همین دلیل دسترسی آسان به آن از تمام نقاط سایت کاربردی خواهد بود. همچنین این مورد باعث بهبود تجربه کاربری نیز می شود. یکی از روش های مورد استفاده، منوی چسبنده سایت است. یعنی منوی سایت به بخش بالایی صفحه چسبیده و با اسکرول کاربر حرکت کند. به این تکنیک Sticky Menu گفته می شود. در ادامه روش ایجاد و ساخت یک منوی چسبنده را یاد می گیریم.

منوی چسبنده سایت

ایجاد منوی چسبنده سایت کار بسیار ساده ای است. به صورت کلی باید مقدار position منوی خود را برابر با fixed تنظیم کنیم. سپس با تنظیم مقدار top به عدد صفر، آن را به بالا صفحه بچسبانیم. برای مثال ما استایل زیر را به منوی خود اضافه می کنیم:

nav {
  ...
  width: 60%;
  position: fixed;
  top: 0;
  ...
}

با این کار منوی ما همیشه به بالای صفحه کاربر چسبیده است. اما این تکنیک یک مشکل برای ما ایجاد می کند. با اسکرول به بالا ترین نقطه سایت، منو روی المان های بالایی سایت قرار می گیرد. برای حل این مشکل باید با تنظیم مقدار margin و یا padding فاصله کوچکی را به اندازه ارتفاع منو در بالای سایت ایجاد کنیم.

نمایش به شرط اسکرول بالا!

یکی از تکنیک های جذاب و حرفه ای در منوی چسبنده سایت، نمایش منو به شرط اسکرول به سمت بالا است. امروزه بیشتر کاربران از موبایل خود برای وبگردی استفاده می کنند. صفحه این دستگاه نسبت به یک مانیتور، فضای بسیار کمتری دارد. در صورت استفاده از منوی چسبنده سایت نیز ما بخش بزرگی از این فضا را همیشه اشغال می کنیم. در اینجا یک تکنیک جذاب معرفی شد. با بررسی رفتار کاربران، اکثر آن ها هنگام اسکرول به سمت پایین، نیازی به منو ندارند. اما در صورت نیاز به منو برای ورود به صفحه دیگر و یا استفاده از جستجو، به سمت بالا اسکرول می کنند. با این کار قصد دستیابی به منوی سایت در بالای صفحه را دارند. اینجا دقیقا قسمت جذاب کار ما است. به زبان ساده باید ابتدا اسکرول به سمت بالا کاربر را تشخیص دهیم. سپس منو را به صورت چسبیده در بالای سایت نمایش دهیم. در این روش کاربر نیازی به اسکرول تا ابتدای صفحه را ندارد.

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

const navbar = document.querySelector("nav");

let lastScroll = 0;

window.addEventListener(
  "scroll",
  () => {
    let scrollY = window["scrollY"];
    if (lastScroll > scrollY) {
      navbar.style.top = "0";
    } else {
      navbar.style.top = navbar.offsetHeight * -1 + "px";
    }
    lastScroll = scrollY;
  },
  { passive: true }
);

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