سعید شعبانی

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

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

دوستان سلام

با استفاده از کد زیر میشه به یک المان وقتی که ارتفاع صفحه 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/

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


لینک به پست

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

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

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

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


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

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

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


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

  • مطالب مشابه

    • توسط 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
      ممنون میشم یه نگاه بندازین و راه حلی اگه داره راهنمایی کنید.
    • توسط morishut
      سلام خدمت دوستان
      ببخشید بنده یه سوال فنی داشتم خدمتتون ممنون میشم جوابم رو بدین
      بنده علاقه خیلی زیادی به برنامه نویسی وب دارم و الان زبان html-css رو به خوبی پشت سر گذاشتم الان بین دو راهی گیر کردم و اینه که نمیدونم باید jquery یا php رو انتخاب کنم بدجور ذهنم رو مشغول کرده که اولویت اول با کدوم یکی از ایناس ممنون میشم راهنماییم کنین که اول کدوم و چرا 
      مرسی ممنون منتظر نظرات و پیشنهاداتون هستم.