1tarah

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

2 پست در این موضوع قرار دارد

سلام

من یک 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 پیکسل چون در رزولیشن های مختلف مقدار فاصله از بالا تغییر میکنه...

0

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

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

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

تکه کد زیر رو نوشتم که برای خیلی جاها کاربرد داره مثلا 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

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

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری