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