سعید شعبانی

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

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

دوستان سلام

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


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

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

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


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

  • مطالب مشابه

    • توسط miraziz
      سلام دوستان. من برای صفحه اول سایتم یک منوای اضافه کردم، ولی نمی دونم که دقیقا چی شده که صفحه اول سایت در نمایشگر عریض( مثلا 14اینچ) یک اسکرول افقی طولانی ایجاد میشه.
      ممنون می شوم راهنمایی کنید که این مشکل از چیست؟

      آدرس سایت: http://echolalia.ir/
    • توسط masoudch
      سلام
      به کمکتون نیاز دارم.
      به مشکل خوردم برای اضافه کردن یک فایل جاوا اسکریپت برای ایجاد اسلاید شو (owl-carousel) در تم وردپرس.
      این تم html بوده که درحال تبدیل اون به تم وردپرس هستم.
      کد جاوااسکریپت: این کد رو کجا باید قرار بدم که مشکل اسلایدشو حل بشه؟
      <script> // You can also use "$(window).load(function() {" $(function () { // Slideshow $("#slider").responsiveSlides({ auto: true, pager: false, nav: true, speed: 500, namespace: "callbacks", before: function () { $('.events').append("<li>before event fired.</li>"); }, after: function () { $('.events').append("<li>after event fired.</li>"); } }); }); </script> آدرس دهی در فانکشن وارد کردم: این درسته که میتونم کدهای جاوا اسکریپت و توی فوتر قرار بدم و بعد از طریق فانکشن یا حالا هر روش دیگه ای اونا رو فراخونی کنم که دیگه همچین مشکلی پیش نیاد؟
      <?php function insert_style() { wp_enqueue_style('zerogrid' , get_template_directory_uri().'/assets/css/zerogrid.css'); wp_enqueue_style('style' , get_template_directory_uri().'/assets/css/style.css'); wp_enqueue_style('responsiveslides' , get_template_directory_uri().'/assets/css/responsiveslides.css'); wp_enqueue_style('font-awesome-min' , get_template_directory_uri().'/assets/font-awesome/css/font-awesome.min.css'); wp_enqueue_style('owl-carousel' , get_template_directory_uri().'/assets/owl-carousel/owl.carousel.css'); wp_enqueue_style('owl-theme' , get_template_directory_uri().'/assets/owl-carousel/owl.theme.css'); wp_enqueue_style('menu' , get_template_directory_uri().'/assets/css/menu.css'); //add scripts wp_enqueue_script('jquery183-min' , get_template_directory_uri().'/assets/js/jquery183.min.js'); wp_enqueue_script('script' , get_template_directory_uri().'/assets/js/script.js'); wp_enqueue_script('jquery-latest-min' , get_template_directory_uri().'/assets/js/jquery-latest.min.js'); wp_enqueue_script('responsiveslides-min' , get_template_directory_uri().'/assets/js/responsiveslides-min.js'); wp_enqueue_script('owl-carousel-min' , get_template_directory_uri().'/assets/owl-carousel/owl.carousel.min.js'); } add_action('wp_enqueue_scripts' , 'insert_style'); ?> خطایی که با بررسی inspect element متوجه شدم اینه که اصلا فایل owl-carousel.js خونده نمیشه.
      ممنون.
       
    • توسط PejmanDesigner
      با عرض سلام و خسته نباشید خدمت دوستانم .
      من مشکلی دارم که با جستجو نتونستم به جواب برسم شاید مواردی که جستجو می کردم اشتباه بوده .
      من می خوام در قسمت منو ها لینکی بزارم که صفحه جدیدی رو باز نکنه و به قسمت های مختلف در همون صفحه بره .
      من یک وب سایت تک صفحه دارم و برگه جدیدی ندارم . ولی می خوام با کلیک بر روی قسمت های مختلف منو بازدید کننده مستقیم اسکرول بشه به همون موقعیت .
      حالا دو سوال دارم در این رابطه
      اول اینکه ایا افزونه ای هست که این کار رو انجام بده ؟ یا اینکه باید کدی رو وارد کنم ؟ (لطفا در صورت داشتن کد ، علاوه بر کد نحوه قرار گیری هم توضیح داده شود)
      دوم اینکه اون طوری که من خیلی وقت پیش ها شنیدم مقدار پیکسل میگیره این کد که کجا اسکرول بشه ، حالا سوالم اینجاست که ما پیکسل بدیم داخل این کد ها یا افزونه آیا درحالت رسپانسیو مشکل ایجاد میشه یا نه ؟
    • توسط IFTHEN
      در حال کد کردن قالبی هستم حالا در قسمت بک پنل و در ایجاد نوشته جدید، فایل های جاوا اسکریپت لود نمی شه و به تبع اون یک سری از آیتم ها از کار می افتن!
      یه بررسی کردم دیدم توی صفحه یک سری از فایل ها درست لود نمی شن! و به عبارت بهتر آدرسشون دچار مشکل شده!
      <link rel='stylesheet' href='http://localhost/user/wp-admin/load-styles.php?c=1&amp;dir=rtl&amp;load%5B%5D=dashicons,admin-bar,buttons,media-views,common,forms,admin-menu,dashboard,list-tables,edit,revisions,media,themes,about,nav-menu&amp;load%5B%5D=s,widgets,site-icon,l10n,wp-auth-check,wp-color-picker,farbtastic&amp;ver=4.7' type='text/css' media='all' /> داخل کد بالا عبارت زیر به صورت کد نمایش داده شده و این باعث این اتفاق شده!
      &amp;
      چطور می تونم این مشکل رو رفع کنم؟
       
       
    • توسط BahramElf
      سلام
      من قالب سایت رو تازه عوض کردم. مشکلی که هست اینکه سایت یه جور خیلی بدی و کند اسکرول میشه، انگار تیک میزنه و گیر داره، تو تنظیمات و اینور و اونور خیلی بررسی کردم چیزی پیدا نشد. نکتش اینجاست اول که صفحه باز میشه و در حال لود شدن هست مشکلی نیست و اسکرول هم درست انجام میشه، اما به محض کامل شدن لود صفحه مشکل اسکرول ایجاد میشه. آدرس سایت:
      www.javaherlux.com
      ممنون میشم یه نگاه بندازین و راه حلی اگه داره راهنمایی کنید.