رسپانسیو کردن با توجه به جاوااسکریپت

[1tarah 94]

سلام

من یک div دارم (به عنوان مثال یک منو افقی بالای سایت) که میخوام وقتی اسکرول میخوره و با جای مورد نظرم برسه از اون به بعد فیکس بشه بالا

تا اینجا مشکلی نیست. از کد زیر استفاده کردم :

			    $("document").ready(function($){
				    var nav = $('.productlist');
				    $(window).scroll(function () {
						    if ($(this).scrollTop() > 230) {
							    nav.addClass("top-fix");
						    } else {
							    nav.removeClass("top-fix");
						    }
				    });
			    });

و به کلاس top-fix استایل زیر رو دادم:

position: fixed;
top: 0;
z-index:999

با توجه به اینکه سایت رسپانسیو هست به مشکل میخورم و مقدار فاصله از بالا با توجه به رزولیشن متغیر میشه و در مثال بالا نمیتونم بگم 230 پیکسل چون در رزولیشن های مختلف مقدار فاصله از بالا تغییر میکنه...

[1tarah 94]

راه حل رو پیدا کردم.

داشتم یک صفحه مقایسه مینوشتم که در رسپانسیو شدن و حالت های مختلف مشکل داشتم ..

تکه کد زیر رو نوشتم که برای خیلی جاها کاربرد داره مثلا css animate ها.

$(function() {
var sticky_productlist_offset_top = $('.productlist').offset().top;
var top_fix = function(){
var scroll_top = $(window).scrollTop(); // our current vertical position from the top
if (scroll_top > sticky_productlist_offset_top) {
	 $('.productlist').css({ 'position': 'fixed', 'top':0,'max-width':'1160px' });
	 $('.p-arrow').css({ 'display': 'block'});
} else {
	 $('.productlist').css({ 'position': 'relative' });
$('.p-arrow').css({ 'display': 'none'});
}
};
top_fix();
$(window).scroll(function() {
	 top_fix();
});
});

یک راه دیگه هم هست استفاده از view port

ویرایش شده مرداد 94 توسط 1tarah