رفتن به مطلب

افزودن یا حذف کردن class یک المان توسط jquery بر اساس ارتفاع آن در زمان اسکرول عمودی


پست های پیشنهاد شده

دوستان سلام

با استفاده از کد زیر میشه به یک المان وقتی که ارتفاع صفحه 500 پیکسل شد یک class اضافه کرد و در بقیه موارد هم این کلاس را حذف کرد.


$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
$(".clearHeader").addClass("darkHeader");
} else {
$(".clearHeader").removeClass("darkHeader");
}
});

اما من می خواهم با توجه به ارتفاع والد اون المان, این کلاس ها افزوده و حذف بشند. البته ارتفاع المان والد هم متغییر هست.

لینک به ارسال

$(".parent").filter(function() {
var height = $(this).height();
if (height >= 500) {
$(this).find(".child").addClass("darkHeader");
} else {
$(this).find(".child").removeClass("darkHeader");
}
});

لینک به ارسال

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

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

لینک به ارسال

موقعیت المان والدتون چوریه

اگر نقطه آغازش در صفحه معلوم باشه می شه نقطه پایانش رو محاسبه کرد و الا که به نظر من راهی نمی رسه جز اینکه والد را پوزیشن ابسولوت در محل قرار بدید که مختصات top ازش دربیاد


$(window).scroll(function() {
var parentStart = $(".parent").css("top");
var h = $(".parent").outerHeight();
var parentEnd = parseInt(h)+parseInt(parentStart);
var scroll = $(window).scrollTop();
if (scroll >= parentEnd) {
$(".child").removeClass("darkHeader1").addClass("darkHeader2");
} else
if (scroll >= parentStart) {
$(".child").removeClass("darkHeader2").addClass("darkHeader1");
}
else {
$(".child").removeClass("darkHeader2").removeClass("darkHeader1");
}
});

لینک به ارسال

در اصل من می خواهم یک نوار اشتراک گذاری متحرک ایجاد کنم مثل نوار اشتراک گذاری 1پزشک یا wpmudev که فقط در کنار متن اصلی مطلب به صورت شناور حرکت می کنند. از نظر css مشکلی ندارم فقط اگر بشه کاری کرد که زمان رسیدن اسکرول صفحه به اون نوار یک کلاس جدید بهش اضافه کرد و وقتی که اسکرول به آخر متن مطلب رسید یک کلاس جدید دیگه هم به نوار اشتراک گذاری افزوده بشه با css می توند شناور بودن را ایجاد کنم.

لینک به ارسال

چرا پس از اول نممی رید سر مسئله اصلی

صبح اول صببح کلی معما حل کردم :D

http://jsfiddle.net/fakhar/2hSVY/2/embedded/result/

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...