ساخت منوی sticky (حالت خاص) فقط فقط با css
سوال جدیدسلام دوست عزیز
این قابلیت به وسیله جاوا اسکریپت یا به طور خلاصه به وسیله کتابخانه جی کوئری امکان پذیره.البته برای چسباندن منو باید از دستور position با مقدار fixed در css استفاده کرد.برای دستور جاوا اسکریپت هم می تونی از کد زیر استفاده کنی.حالت کلی دستور به شکل زیر هست:
<script> var aboveHeight = $('header').outerHeight(); $(window).scroll(function(){ if ($(window).scrollTop() > aboveHeight){ $('.MainMenu').css('position','fixed'); } else { $('.MainMenu').css('position','static'); } }); </script>
این هم کد htmlو css
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ثابت کردن منوی بالا در زمان اسکرول</title> <script src="js/jquery.min.js"></script> <style> body { font-family: Tahoma; margin: 0px; direction: rtl; background: radial-gradient(white 20%,#d0d0d0 100%); } .fixed { position:fixed } .MainMenu { top: 0px; width: 100%; height: 40px; align-items: center; display: flex; background: linear-gradient(#5fcdff , #0071cc); } ul { display: flex; } li { list-style: none; padding:20px; color: white; } </style> </head> <body> <div class="MainMenu"> <nav> <ul> <li>صفحه نخست</li> <li>مقالات آموزشی</li> <li>تماس با ما</li> </ul> </nav> </div> </body> </html>
فقط یادت نره که کتابخانه جی کوئری رو به سندت اضافه کنی.