درخواست ستون کناری چسبان

[رضا علیزاده 41]

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

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

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

 

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

[رضا علیزاده 41]

محض اطلاع؛

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

 

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

[alimir 795]

سلام.

نیازی به افزونه نیست. دو منبع آموزشی:

http://stackoverflow.com/questions/21447947/jquery-fixing-a-side-bar-while-scrolling-until-bottom

http://leafo.net/sticky-kit/

[majid1889 733]

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

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

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

.fix{position: fixed}

 

ویرایش شده دی 95 توسط majid1889

[رضا علیزاده 41]

در 2 دقیقه قبل، majid1889 گفته است :

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

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

 

[majid1889 733]

نه

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

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

[رضا علیزاده 41]

در 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 رو به ستون کناری میدم, اونم کلاً حذف میشه.

[majid1889 733]

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

این 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 رو چک کنید متوجه میشید