نمایش یک باکس تنها در پایین صفحه توسط jQuery

- visibility ۹ mode_comment

بنام یگانه هستی بخش.

سلام.امروز با آموزشی کاربردی همراه شما هستیم.

دمو

 همونطور که دیدید وقتی به قسمتی از صفحه میرسید ، باکسی از سمت راست صفحه ظاهر میشه.یه ترفند ساده با جی کوئریه.خب بریم سراغ کد هاش.

HTML : (یادتون نره کتابخانه ی جیکوئری رو حتما فراخوانی کنید وگرنه کد جی کوئریمون کار نمیکنه)

همونطور که دیدید کد های HTML ، شامل 2 تا دایو(div) بود.که در دایو اول متن مورد نظر رو مینویسیم و دایو دوم هم ، باکسی هست که از سمت راست صفحه ظاهر میشه. اگه دقت داشته باشید به یکی از پاراگراف ها (خط 15) آی دیه "important" رو دادیم.

CSS :

این استایل بخش متن ها بود و توضیح خاصی هم نداره.فقط در خط 15 گفتیم : سطر اول پاراگرافی با آی دیه important قرمز رنگ باشه.

این هم استایل باکسمون هست.اگه دقت کنید برای اینکه باکسمون پنهان باشه از position استفاده کردیم(خط نهم).

خب بریم سراغ مهم ترین بخش یعنی کد جی کوئری.

jQuery :

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

در خط سوم با تابع on تعیین کردیم که وقتی صفحه اسکرول شد، کد های داخل تابع on انجام بشن.

در خط چهارم هم توسط دستور if ، گفتیم اگه مقدار فاصله ای که از بالای صفحه اسکرول کردیم بیشتر از مقدار متغیر important بود(یعنی کاربر با اسکرول کردن به اون پاراگراف رسیده و اون رو میبینه)،اون باکسمون از سمت راست خارج شه و در دید قرار بگیره وگرنه در سمت راست و دور از دید قرار بگیره.

در خط 10 هم گفتیم وقتی روی عنصری با آی دیه close(همون ضربدر گوشه ی باکس) کلیک شد،ابتدا اون باکسمون با افکتی پنهان بشه بعد هم که کلا پاک بشه.

همین.میتونید دمو رو از اینجا دانلود کنید.

موفق باشید؛یا علی

comment دیدگاه کاربران
N a S e R

بسیار عالی و کاربردی ❓

خیلی عالی بود

بد نبود …

با تشکر

خیلی عالیه
این آموزشهای کوچیک ولی کاربردی قدرت تجزیه و تحلیل فوق العاده ای به کسانی که دارند جی کوئری رو یاد می گیرند میده…

mm021

سلام خیلی با حال بود . دستتون درد نکنه . راستی چه جوری میشه اون رنگ زرد رو تغییر داد

mm021

ببخشید رنگ نارنجی کنار

mm021

پیدا کردم درست شد رنگش رو عوض کردم

حسین بلالی بیدگلی

عالی بود

Paria RVN

جالب بود ممنون

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.