mohammad22 13 ارسال شده در اسفند 94 گزارش بازنشر ارسال شده در اسفند 94 با سلام و عرض ادب میخواستم بدونم چطور میشه در دستور به زبان جاوااسکریپت از تابع شرطی css استفاده کرد jQuery(window).scroll(function () { var $heightScrolled = $(window).scrollTop(); var $defaultHeight = 60; if ( $heightScrolled < $defaultHeight ) { $('.Menu-fixed').removeClass("sticky") } else { $('.Menu-fixed').addClass("sticky") } }); میخوام کد بالا در صورتیکه media مقدارش کمتر از 768 بود اجرا نشه @media screen and (max-width:768px) ایا چنین چیزی امکان داره چون بدلیل اینکه کد sticky در حالت واکنش گرا برای موبایل اختلال در منو ایجاد میکند. نقل قول لینک به ارسال
mk-73 165 ارسال شده در اسفند 94 گزارش بازنشر ارسال شده در اسفند 94 (ویرایش شده) سلام و درود فکر کنم بتونید از این روش استفاده کنید: @media screen and (max-width:768px){ .Menu-fixed("استایل مورد نظرتون") } موفق باشید./ ویرایش شده اسفند 94 توسط mk-73 نقل قول لینک به ارسال
فرحان 997 ارسال شده در اسفند 94 گزارش بازنشر ارسال شده در اسفند 94 سلام. بسته به نحوه کد نویسی تون دو راه به ذهنم میرسه: یکی اینکه از همون روش مدیا کوئری استفاده کنید و کد زیر رو بزارید توی فایل استایلتون: @media screen and (max-width:768px){ .sticky{ display:none; } } و راه دوم اینه که اگر می خواید افکت اسلاید داشته باشید روش اول جواب نمیده اگر هم بده روی مرورگرهای خاصی ممکنه جواب نده (چون باید از css3 استفاده کنید) که در این صورت می تونید با خود جی کوئری اسلاید اپ کنید و بعد کلاس استیکی رو ازش حذف کنید. یعنی در واقع باید یک event به تابع ریسایز بایند کنید. کدش توی نت موجوده. و باید چیزی شبیه به این باشه : $(window).on('resize',function(){ if( $(window).width() < 748 ){ $('.sticky').slideUp().removeClass('sticky'); } else{ if(!$('.Menu-fixed.sticky').length) $('.Menu-fixed').addClass('sticky').slideDown(); } }); دقت کنید توی روش دوم به کلاس استیکی نباید استایل خاصی داده باشید و فقط از اون برای بررسی حالت نوار استفاده کردیم. یعنی بودنش به این معنیه که الان نوار به صورت فیکس شده هست. 1 نقل قول لینک به ارسال
mohammad22 13 ارسال شده در اسفند 94 مالک گزارش بازنشر ارسال شده در اسفند 94 در 21 دقیقه قبل، فرحان گفته است : سلام. بسته به نحوه کد نویسی تون دو راه به ذهنم میرسه: یکی اینکه از همون روش مدیا کوئری استفاده کنید و کد زیر رو بزارید توی فایل استایلتون: @media screen and (max-width:768px){ .sticky{ display:none; } } و راه دوم اینه که اگر می خواید افکت اسلاید داشته باشید روش اول جواب نمیده اگر هم بده روی مرورگرهای خاصی ممکنه جواب نده (چون باید از css3 استفاده کنید) که در این صورت می تونید با خود جی کوئری اسلاید اپ کنید و بعد کلاس استیکی رو ازش حذف کنید. یعنی در واقع باید یک event به تابع ریسایز بایند کنید. کدش توی نت موجوده. و باید چیزی شبیه به این باشه : $(window).on('resize',function(){ if( $(window).width() < 748 ){ $('.sticky').slideUp().removeClass('sticky'); } else{ if(!$('.Menu-fixed.sticky').length) $('.Menu-fixed').addClass('sticky').slideDown(); } }); دقت کنید توی روش دوم به کلاس استیکی نباید استایل خاصی داده باشید و فقط از اون برای بررسی حالت نوار استفاده کردیم. یعنی بودنش به این معنیه که الان نوار به صورت فیکس شده هست. با سلام ابتدا از پاسختون تشکر میکنم. مورد اولی که اشاره کردین همان موردی هستش که من استفاده میکردم و مشکلش اینجا بودش که با وجود display none شدن کد جاوا اسکریپت روی منو تاثیر میذاره و موجب بد عمل کردن منو در حالت رسپانسیو کمتر از 748 داره. مورد دوم رو هم نمیدونم چرا باعث میشه تو حالت بزرگتر از 748 منو sticky بد عمل کنه. آیا نمیشه دستوری قبل همون کد جاوا ای که خودم گذاشتم قرار داد تا موجب بشه تو سایز media کمتر از 748 اون کد جاوا از حلقه خارج بشه مثل jQuery(function() { $(window).on('resize',function(){ if( $(window).width() < 748 ){ } else { jQuery(window).scroll(function () { var $heightScrolled = $(window).scrollTop(); var $defaultHeight = 60; if ( $heightScrolled < $defaultHeight ) { $('.Menu-fixed').removeClass("sticky") } else { $('.Menu-fixed').addClass("sticky") } }); } }); }); نقل قول لینک به ارسال
فرحان 997 ارسال شده در اسفند 94 گزارش بازنشر ارسال شده در اسفند 94 به این صورت بنویسید احتمالا مشکل حل بشه. jQuery(document).ready(function($){ handleSticky($); $(window).on('scroll', function () { handleSticky($); }); $(window).on('resize',function(){ if( $(window).width() < 748 ){ $('.sticky').removeClass('sticky'); } else{ handleSticky($); } }); }); function handleSticky($){ var $heightScrolled = $(window).scrollTop(); var $defaultHeight = 60; if ( $heightScrolled < $defaultHeight ) { $('.Menu-fixed').removeClass("sticky") } else { $('.Menu-fixed').addClass("sticky") } } 1 نقل قول لینک به ارسال
mohammad22 13 ارسال شده در اسفند 94 مالک گزارش بازنشر ارسال شده در اسفند 94 در 13 دقیقه قبل، فرحان گفته است : به این صورت بنویسید احتمالا مشکل حل بشه. jQuery(document).ready(function($){ handleSticky($); $(window).on('scroll', function () { handleSticky($); }); $(window).on('resize',function(){ if( $(window).width() < 748 ){ $('.sticky').hide().removeClass('sticky'); } else{ handleSticky($); } }); }); function handleSticky($){ var $heightScrolled = $(window).scrollTop(); var $defaultHeight = 60; if ( $heightScrolled < $defaultHeight ) { $('.Menu-fixed').removeClass("sticky") } else { $('.Menu-fixed').addClass("sticky") } } اینم تو حالت کمتر از 748 باز روی منو تاثیر میذاره و موجب میشه منو تو زمان پایین اوردن اسکرول بپره نقل قول لینک به ارسال
پست های پیشنهاد شده
به گفتگو بپیوندید
هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .