• اطلاعیه ها

    • Morteza

      باهم بسازیم: اطلس ووکامرس و وردپرس   14/07/96

      تاپیک ایجاد شده برای بحث در جهت ایجاد یک منبع، ویکی، صفحات توضیحی و یا بخش آموزشی جامع برای وردپرس و متعلقات مختلف آن است. لطفا جهت مشارکت در این بحث، ارائه پیشنهاد و یا انتقاد به تاپیک فوق مراجعه کنید. باهم بسازیم: اطلس ووکامرس و وردپرس
mohammad22

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

6 پست در این موضوع قرار دارد

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

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

0

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

سلام و درود

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

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

موفق باشید./

ویرایش شده در توسط mk-73
0

به اشتراک گذاری این پست


لینک به پست

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

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

@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

به اشتراک گذاری این پست


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

});

 

0

به اشتراک گذاری این پست


لینک به پست

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

 

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

به اشتراک گذاری این پست


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

0

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری