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

نوشته : رضا علیزاده

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

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

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

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

نوشته : رضا علیزاده

محض اطلاع؛

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

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

نوشته : alimir

سلام.

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

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

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

نوشته : majid1889

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

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

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

.fix{position: fixed}

نوشته : رضا علیزاده

در 2 دقیقه قبل، majid1889 گفته است :
$ ( window ). on ( ‘scroll’ , function (){ posY = $ ( ‘.youWidgetClass’ ). position (). top , theScroll = $ ( this ). scrollTop (); if ( theScroll >= posY ) $ ( ‘.youWidgetClass’ ). toggleClass ( ‘fix’ ); });

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

نوشته : majid1889

نه

باس تو فایل اسکریپتتون قرار بگیره ( فایل 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');
}); 

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

position: fixed;

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

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

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

نوشته : majid1889

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

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

در 4 دقیقه قبل، رضا علیزاده گفته است :
کد رو به صورت زیر قبل از تگ /head قرار دادم
<script $(window).on(‘scroll’,function(){
posY = $(‘.yourWidgetClass’).position().top,
theScroll = $(this).scrollTop();
if(theScroll >= posY)
$(‘.yourWidgetClass’).toggleClass(‘fix’);
});
به ستون کناری هم استایل زیر رو میدم,
position : fixed ;

در مورد این کد ٬ اولا قبل از