حالت موضوعی | حالت خطی

**YasinDesign**

با سلام
دوباره با یکی دیگه از آموزش های مفید یاسین دیزاین در خدمتتون هستم

دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.

در این آموزش میخوام نحوه همخوانی کردن کد sticky-menu با کامپوننت widgetkit را آموزش بدم.

اول از همه فایل جی کوئری که به این آموزش پیوست کردم را دانلود کنید.

خب حالا فایل را از حالت فشرده خارج کنید و در مسیر زیر بریزید و جایگزین فایل موجود کنید.

کد: (انتخاب همه)

media/widgetkit/js/

حالا کد زیر را که مربوط به نمایش sticky-menu هست و بنده اصلاحاتی در اون انجام دادم را درون فایل index.php قالب سایت قبل از تگ head قرار بدین

کد: (انتخاب همه)

<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>

عدد 330 در این کد برای تعیین میزان اسکرول شدن صفحه و اجرای sticky-menu هست که به دلخواه میونید عوض کنید.
خب در کد بالا دو تا کلمه #top_menu وجود داره که بنا به اسم موقعیت منوی شما در فایل css تغییر باید بدید

حالا کد زیر را هم توی فایل template.css قالبتون اضافه کنید و به دلخواه تغییرش بدید.

کد: (انتخاب همه)

.sticky{

    position: fixed !important;

    width: 900px !important;

    top:-10px !important;

    margin:0 auto !important;

}

در آخر هم فایل ها را ذخیره کنید و از وجود sticky-menu در کنار کامپوننت قدرتمند widgetkit لذت ببرید.

موفق و پیروز باشید.