رفتن به مطلب

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

سلام خدمت اساتید؛

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

این ستون کناری رو با ابزارک ها تنظیم کردم, حالا میخوام زمانی که ابزارک آخر (یا ابزارک دلخواه رسید) این ستون با اسکرول کردن تا محل مشکل پایین بیاد.

 

ممنون میشم راهنمایی بفرمایید.

لینک به ارسال

محض اطلاع؛

بیشتر مایلم این کار رو با کد انجام بدم تا افزونه,

 

از افزونه هایی مثل Q2W3 Fixed Widget  هم استفاده کردم ولی جواب نگرفتم!

لینک به ارسال

ی همچین کدی باس بشه (جی کوئری) :

$(window).on('scroll',function(){
  posY = $('.yourWidgetClass').position().top,
    theScroll = $(this).scrollTop();
  if(theScroll >= posY)
    $('.yourWidgetClass').addClass('fix');
  else
    $('.yourWidgetClass').removeClass('fix');
});

و طبیعتا کد استایلش میشه این :

.fix{position: fixed}

 

ویرایش شده توسط majid1889
لینک به ارسال
در 2 دقیقه قبل، majid1889 گفته است :

$(window).on('scroll',function(){ posY = $('.youWidgetClass').position().top, theScroll = $(this).scrollTop(); if(theScroll >= posY) $('.youWidgetClass').toggleClass('fix'); });

این کد مربوط به فانکشن میشه ؟

 

لینک به ارسال

نه

باس تو فایل اسکریپتتون قرار بگیره ( فایل js )

یا بین دوتا تگ script توی فایل html تون

لینک به ارسال
در 6 دقیقه قبل، majid1889 گفته است :

نه

باس تو فایل اسکریپتتون قرار بگیره ( فایل js )

یا بین دوتا تگ script توی فایل html تون

کار نکرد.

کد رو به صورت زیر قبل از تگ /head قرار دادم

<script $(window).on('scroll',function(){
  posY = $('.yourWidgetClass').position().top,
    theScroll = $(this).scrollTop();
  if(theScroll >= posY)
    $('.yourWidgetClass').toggleClass('fix');
}); </script>

به ستون کناری هم استایل زیر رو میدم,

position: fixed;

 

اما 2 تا مسئله هست,

اول - وقتی جی کوئری اول رو قرار میدم, اسلاید محصولات edd از کار میوفته.

دوم - وقتی استایل fixed رو به ستون کناری میدم, اونم کلاً حذف میشه.

لینک به ارسال

:mellow::mellow:

شما مطمئنید طراحی سایت انجام میدید ؟‌

این jsfiddle رو ببینید ! ( کد همونه فقط ی مقدار بهینه شده )

در 4 دقیقه قبل، رضا علیزاده گفته است :

کد رو به صورت زیر قبل از تگ /head قرار دادم


<script $(window).on('scroll',function(){
  posY = $('.yourWidgetClass').position().top,
    theScroll = $(this).scrollTop();
  if(theScroll >= posY)
    $('.yourWidgetClass').toggleClass('fix');
}); </script>

به ستون کناری هم استایل زیر رو میدم,


position: fixed;

 

در مورد این کد ٬ اولا قبل از </body> قرار بدید ...

دوما تگ شروع اسکریپت رو ببندید ینی اینجوری :

<script> $(window).on('scroll',function(){
  posY = $('.yourWidgetClass').position().top,
    theScroll = $(this).scrollTop();
  if(theScroll >= posY)
    $('.yourWidgetClass').toggleClass('fix');
}); </script>

سوما باید کتابخونه jQuery رو فراخوانی کنید

چهارما قبلش باس فانکشن رو اضافه کنید ... همون کد jsfiddle رو چک کنید متوجه میشید ;)

لینک به ارسال

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

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

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

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

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

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

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

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

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