مشکل در تبدیل position با جاوا (برای اسکرول)

[webmaster 55]

سلام به همه دوستان

من یک سایدبار دارم داخل قالب که میخوام وقتی اسکرول اگر مثلا تا فلان نقطه پایین اومد position از inherit به fixed تغییر پیدا کنه.

چندتا کد امتحان کردن هیچکدوم نشد.

کد html به صورت زیر هست :

<div class="tabs-container">
<div class="head"> تبلیغات </div>
<div class="main-s">متن متن متن </div>
</div>

css اش به صورت زیر :

.tabs-container {
border-radius: 3px;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
}

حالا میخوام وقتی رسید به نقطه مورد نظرم (اسکرول منظورمه )

استایل : top:50px; position:inherit;

به

top:50px; position:fixed;

تبدیل بشه.

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

$(window).scroll(function () {
if ($(window).scrollTop() > 70) {
			 $('.tabs-container').css({
				 'position': 'fixed',
				 'top': '50px'
			 })
		 } else {
			 $('.tabs-container').css({
				 'position': 'inherit',
				 'top': '50px'
			 })
		 }
	 }
});

ممنون میشم راهنمایی کنید.

ویرایش شده اسفند 92 توسط webmaster

[webmaster 55]

مشکل رو حل کردم .

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

$(document).ready(function () { 
  var top = $('.tabs-container').offset().top - parseFloat($('.tabs-container').css('marginTop').replace(/auto/, 0));
  $(window).scroll(function (event) {
    var y = $(this).scrollTop();
	  if (y >= top) {
	  $('.tabs-container').addClass('fixed');
    } else {
	  $('.tabs-container').removeClass('fixed');
    }
  });
});

کافیه یه استایل به صورت زیر در فایل css تون اضافه کنید :

.fixed {
    position: fixed ;
    top: 0;
}

[sajjad1366 0]

سلام

میشه لطف کنید همین کد رو جوری بنویسید که وقتی انتهای سایدبار با پایین صفحه set شد همونجا فیکس بشه... ؟

من خودم تغییرش دادم ولی نشد...

با سپاس از شما دوست عزیز

ویرایش شده آذر 93 توسط sajjad1366

[imanfakhar 26231]

$(document).ready(function () {
  var h = $('.tabs-container').height();
  var w = $(window).height();
  var top = parseInt(w)-parseInt(h);
  $(window).scroll(function (event) {
	    var y = $(this).scrollTop();
		  if (y <= top) {
		  $('.tabs-container').addClass('fixed');
	    } else {
		  $('.tabs-container').removeClass('fixed');
	    }
  });
});