+- پارس جوم :: انجمن های تخصصی جوملا (https://forums.parsjoom.ir)
+-- انجمن: آموزش (/forum-25.html)
+--- انجمن: آموزش های کاربردی (/forum-109.html)
+--- موضوع: آموزش نحوه همخوانی کردن کد sticky-menu با کامپوننت widgetkit (/thread-17489.html)
آموزش نحوه همخوانی کردن کد sticky-menu با کامپوننت widgetkit - YasinDesign - ۲۱-۱۲-۱۳۹۳ ۰۶:۲۶ صبح
با سلام
دوباره با یکی دیگه از آموزش های مفید یاسین دیزاین در خدمتتون هستم
دوباره با یکی دیگه از آموزش های مفید یاسین دیزاین در خدمتتون هستم
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
در این آموزش میخوام نحوه همخوانی کردن کد sticky-menu با کامپوننت widgetkit را آموزش بدم.
اول از همه فایل جی کوئری که به این آموزش پیوست کردم را دانلود کنید.
خب حالا فایل را از حالت فشرده خارج کنید و در مسیر زیر بریزید و جایگزین فایل موجود کنید.
کد:
media/widgetkit/js/کد:
<script language="javascript">
(function ($) {
$(window).scroll(function () {
var $heightScrolled = $(window).scrollTop();
var $defaultHeight = 330;
if ( $heightScrolled < $defaultHeight )
{
$('#top_menu').removeClass("sticky")
}
else {
$('#top_menu').addClass("sticky")
}
});
}(jQuery));
</script>خب در کد بالا دو تا کلمه #top_menu وجود داره که بنا به اسم موقعیت منوی شما در فایل css تغییر باید بدید
حالا کد زیر را هم توی فایل template.css قالبتون اضافه کنید و به دلخواه تغییرش بدید.
کد:
.sticky{
position: fixed !important;
width: 900px !important;
top:-10px !important;
margin:0 auto !important;
}موفق و پیروز باشید.