رفتن به مطلب

مشکل در تابع شرط css در جاوا اسکریپت


پست های پیشنهاد شده

با سلام و عرض ادب

میخواستم بدونم چطور میشه در دستور به زبان جاوااسکریپت از تابع شرطی 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 در حالت واکنش گرا برای موبایل اختلال در منو ایجاد میکند.

لینک به ارسال

سلام و درود

فکر کنم بتونید از این روش استفاده کنید:

@media screen and (max-width:768px){
.Menu-fixed("استایل مورد نظرتون")
}

موفق باشید./

ویرایش شده توسط mk-73
لینک به ارسال

سلام. بسته به نحوه کد نویسی تون دو راه به ذهنم میرسه:

یکی اینکه از همون روش مدیا کوئری استفاده کنید و کد زیر رو بزارید توی فایل استایلتون:

@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();
  }
});

 

دقت کنید توی روش دوم به کلاس استیکی نباید استایل خاصی داده باشید و فقط از اون برای بررسی حالت نوار استفاده کردیم. یعنی بودنش به این معنیه که الان نوار به صورت فیکس شده هست.

 

لینک به ارسال
در 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")
        }
		});	 
	 
 }  
});

});

 

لینک به ارسال

به این صورت بنویسید احتمالا مشکل حل بشه.

 

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")
  }
}

 

لینک به ارسال
در 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 باز روی منو تاثیر میذاره و موجب میشه منو تو زمان پایین اوردن اسکرول بپره

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...