تاکنون پیش آمده که در حین جستجو در سایت و مرور مطالب آن نیاز پیدا کنید تا مجدد به منوی تعبیه شده در بالای سایت رجوع کنید؟
اسکرول سایت و برگشت به ابتدای صفحه جهت رویت منو، کاری خسته کننده نیست؟!!
طراحان سایت برای حل این مشکل از استایل position:fixed جهت ثابت نگه داشتن منوی سایت استفاده کرده‌اند. اما این کل ماجرا نیست! اشغال شدن بخش عمده‌ای از سایت توسط لوگو و منو در هنگام اسکرول صفحه به سمت پایین اصلا خوشایند نیست.
ما در این مقاله ترفندی را به شما آموزش خواهیم داد تا منویی شناور را برای سایت خود طراحی کنید. این منو همواره در هنگام اسکرول شدن صفحه در بالای صفحه شما قرار خواهد گرفت و می‌تواند مطابق با نحوه طراحی سایت شما، استایلی متفاوت با منوی اولیه را بگیرد.
نحوه عملکرد:
قسمت هدر سایت، عموما از منوهای اصلی سایت و لوگو تشکیل شده است. در حالت عادی در هنگام بالا آمدن سایت این قسمت‌ها دارای استایل‌های مشخصی از قبیل padding، margin، font و... می‌باشند. واضح است با آمدن صفحه به سمت پایین کاربران ترجیح می‌دهند عمدتا مطالب سایت را رویت کنند تا صفحه ای را که بخش عمده‌ای از آن را منو و لوگو تشکیل می‌دهد.
در این جاست که شما میتوانید از دستور jquery زیر کمک بگیرید.
کد:
$(window).scroll(function() {
$(this).scrollTop() > 55 ? $("#header").addClass("fix_menu") : $("#header").removeClass("fix_menu");
});
با کمک این دستور هرگاه صفحه وب اسکرول شود و مقدار آن از یک عدد (در اینجا ۵۵ پیکسل ) بیشتر شود، کلاس fix_menu به تگی که دارای آی دی header اضافه می‌شود. بنابراین شما میتوانید بوسیله این کلاس وقتی صفحه به پایین اسکرول می‌شود به هدر سایت خود استایلی متفاوت بدهید. میتوانید اندازه لوگو را تغییر دهید یا اندازه حاشیه‌های آن را کم کنید.
کد:
#header img{
height: 100px;
}
#header.fix_menu img{
height: 60px;
}
اکنون کار تمام شد.!!!
میتوانید از منوی شناور در سایت خود لذت ببرید.
برای دیدن دمو کلیک کنید.منبع:
طراحی سایت ستروکیت