سعید شعبانی

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

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

دوستان سلام

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


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

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

0

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


لینک به پست
مهمان
این موضوع برای عدم ارسال قفل گردیده است.

  • مطالب مشابه

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