سعید شعبانی

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

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

دوستان سلام

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


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

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

0

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


لینک به پست

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

4

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


لینک به پست

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

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

0

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


لینک به پست

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

اگر نقطه آغازش در صفحه معلوم باشه می شه نقطه پایانش رو محاسبه کرد و الا که به نظر من راهی نمی رسه جز اینکه والد را پوزیشن ابسولوت در محل قرار بدید که مختصات 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");
}
});

3

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


لینک به پست

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

0

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


لینک به پست

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

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

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

3

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


لینک به پست

عالی بود اینجا هم می تونید نتیجش رو ببینید

1

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


لینک به پست

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

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

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

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


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

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

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


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

  • مطالب مشابه

    • توسط mamadja
      سلام خدمت مهندسین گرامی
      بنده یه پوسته HTML دارم که قصد دارم پله به پله خودم اون رو تبدیل به یک پوسته وردپرسی کنم . این پوسته ای رو که دانلود کردم به قسمت فراخوانی اسکریپت ها رسیدم طبق آموزش هایی که دیدم و کارایی که انجام دادم درست اسکریپت های مورد نظر فراخوانی نمیشن ، یعنی مطابق فایل Html که دانلود کردم نیستند . حتی فایل function.php رو هم درست کردم و تغییرات لازم را انجام دادم اما متاسفانه نتونستم ... 
      فایل ها رو آپلود میکنم تا اونجایی که پیش رفتم . هم فایل اصلی HTML هم پوشه Theme که دارم وردپرسش میکنم اگر کسی میتونه کمکم کنه و اسکریپت ها رو فراخوانی کنه ممنون میشم .
      *بنده در نظر دارم این پوسته رو تبدیل به یک پوسته وردپرسی فروش گیفت کارت تبدیل کنم و در نهایت با استفاده از ووکامرس یک فروشگاه تبدیل بشه .. اگه اساتید نظری در این رابطه دارن که این پوسته اصلا به درد همچین کاری میخوره یا نه راهنمایی کنه ممنون میشم .. ( قرار نیست آنلاین شه و بالا بیاد جهت آموزش خودم هدف گذاری کردم )
      سپاس
      Gifti.rar
      gift-wp.rar
    • توسط Monica
      باسلام ، ی select option دارم
      من میخوام با jQuery ترجیحا ajax بتونم طبق انتخاب کاربر بخش مربوطه رو نمایش بدم
      کدهای منو ببینید 
      // صفحه اصلی index.php <script> jQuery(document).ready(function($) { jQuery('#select123').change(function() { jQuery('.content123').hide(); jQuery('#' + jQuery(this).val()).show(); }).trigger("change"); }); </script> <select id="select123">  <option value="content1" selected>content1</option> <option value="content2">content2</option> <option value="content3">content3</option> <option value="content4">content4</option> </select> * توجه: میخوام وقتی صفحه بالا ران میشه text defult show بطور پیش فرض نمایش داده بشه
      صفحه my-page.php
      //my-page.php <div id="content1" class="content123"> text defult show </div> <div id="content2" class="content123"> contentttttttt </div> <div id="content3" class="content123"> content3 </div> <div id="content4" class="content123"> content4 </div>  
    • توسط Monica
      من یک سلکت آپشن برای نمایش جدول دارم که میخوام آپشن هام دوتا بشه.
      سلکت آپشن من اینه:
      <select id="select123">  <option value="content1">جدول قیمت</option>  <option value="content2">جدول دلار</option> </select> <div id="content1" class="content123">  نمایش جدول قیمت </div> <div id="content2" class="content123">  نمایش جدول دلار </div> Script: jQuery(document).ready(function($) { jQuery('#select123').change(function() { jQuery('.content123').hide(); jQuery('#' + jQuery(this).val()).show(); }).trigger("change"); }); Css: div.content123 { display: none } دو جدول قیمت و جدول دلار . میخوام به هر کدوم ی آپشن اضافه شه ، مثلا آپشن دوم جدول قیمت بشه دیروز - امروز 
      جدول آپشن قیمت دلار بشه هفته گذشته - قیمت روز
      یعنی کاربر وقتی میزنه جدول دلار بعد در آپشن دوم انتخاب کنه هفته گذشته ، یا روز 
      چطوری میشه کدهام؟
      ممنونم از دوستانی که کمک میکنن
    • توسط koolfayfer
      سلام و وقت بخیر
      من برای سایتم از این استفاده کردم که کارش یه پروگرس بار لودینگ به همراه ایجکس کردن صفحه است
      لودینگش اجرا میشه اما ایجکسش کار نمیکنه
      برای این که متوجه بشید دو سایت زیر رو بررسی کنید
      نمونه صحیح:
      http://zakerin.ir
       
      نمونه شبیه چیزی که من به اون رسیدم:
      https://zhaket.com
      (چیزی که اشتباهه اینه که صفحه لود میشه و سفید میره و میاد بعدش پروگرس اجرا میشه که اصولا نباید صفحه رفرش بشه)
       
      دوستان لطفا کمک کنند
    • توسط rosi
      سلام دوستان بنده بعد از مدت ها امدم یه قالب واسه وردپرس بنویسم
      در  منو ها از این پلاگین ها برای اسکرول در تگ خاصی
        scrollIt.js
      scrollIt.min.js
      استفاده کردم.ولی مشکل اونجاست که وقتی میخوام منو هارو واسه وردپرس درج کنم  طبعتا چون تگ li  پاک میشه.کد از کار میوفته.
      الان باید چیکار کنم.
      باید از افزونه استفاده کنم به صورت دستی امکان نداره.