آموزش طراحی وب

رویداد scroll در جی کوئری

در این جلسه ی آموزشی در رابطه با رویداد scroll در جی کوئری صحبت میکنیم و با ذکر یک مثال بسیار کاربردی این رویداد رو بیشتر توضیح میدیم.

 Scroll-Down

فصل سوم : event ها در جی کوئری

جلسه دهم : رویداد scroll در جی کوئری

سلام به همراهان همیشگی مدرسه مجازی ایرانیان

در این جلسه ی آموزشی در رابطه با رویداد scroll در جی کوئری صحبت میکنیم و با ذکر یک مثال بسیار کاربردی این رویداد رو بیشتر توضیح میدیم.

 

رویداد scroll در جی کوئری

رویداد scroll زمانی اتفاق میوفته که کاربر در صفحه عمل اسکرول انجام بده یعنی به سمت بالا و یا پایین صفحه حرکت کنه و این event روی تمامی عناصری که خاصیت scroll دارند اعمال میشه مثل عنصر textarea .

 

قاعده دستوری رویداد Scroll

Selector : عنصر مورد نظر ماست که قراره رویداد روی این عنصر اتفاق بیوفته .

Scroll : نام رویداد هست.

Function : عملیاتی هست که قراره هنگام رویداد scroll انجام بشه .

 

scroll-down-short

خوب دوستان میخوام با یه مثال کاربردی این رویداد رو براتون توضیح بدم . میخوایم بگیم با اسکرول صفحه منوی بالای سایت بصورت ثابت نمایش داده بشه . به کد html زیر توجه کنید :

در اینجا ما یه عنصر header داریم که مشخصات و عنوان سایت رو در این عنصر قرار دادیم . بعد از header منوی اصلی سایت ما قرار داره که قراره با اسکرول صفحه بصورت ثابت نمایش داده بشه.

حالا باید بگیم زمانی که صفحه اسکرول خورد و به ارتفاع header صفحه پایین اومد. منوی ما بصورت fixed بشه و ثابت نمایش داده بشه.

یه کلاس هم تعریف میکنیم که خاصیت fixed داره :

حالا برای این کار این رویداد رو بصورت زیر مینویسیم:

در این کد ما ارتفاع header رو میگیریم و در متغییر aboveHeight ذخیره میکنیم و بعد میگیم زمانی که صفحه یا window به ارتفاع header پایین اومد کلاس fixed رو به MainMenu اضافه کن مقدار topش رو برابر با ۰ قرار بده و عنصر بعدی رو هم با فاصله ۶۰ پیکسل از منو قرار بده؛ در غیر این صورت این کلاس رو از mainMenu بگیر و مقدار fixed رو برای MainMenu حذف کن.

در این حالت زمانی که صفحه اسکرول میخوره و پایین میاد منو بصورت ثابت نمایش داده میشه و زمانی که به بالای صفحه برمیگردیم منو سر جای اصلیش و پایین header نمایش داده میشه.

 

برای مثال میتونید منوی مدرسه مجازی ایرانیان رو ببینید.

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

موفق و پاینده باشید .

تهیه شده در مدرسه مجازی ایرانیان

حسین همت یار

نویسنده در مدرسه مجازی ایرانیان ، دانشجوی رشته IT ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

دیدگاه ۱۰

    • سلام دوست عزیز
      بله با رویداد scroll در جی کوئری ، منوی آبی رنگ بالای سایت رو به صورت ثابت نمایش میدیم.
      موفق و پاینده باشید

  • سلام میخواستم بدونم براتون امکانپذیر هست که لطفی کرده وراهنمایی بفرمایید
    یک بخش علاقه مندیها بصورت جی کوئری میخوام که کاربر بتواند یک صفحه ای را ذخیره کندواین صفحه بصورت یک نامی که کاربر انتخاب میکند در صفحه ای که من قرار میدهم ذخیره کند وسپس بتواند صفحه انتخاب شده را فراخوانی کنددر صورت امکان سورس کد این منو را برایم قرار دهید
    قبلااز راهنماییتان صمیمانه تشکر وقدردانی مینمایم

    • سلام دوست عزیز
      ابتدا خدمتتون عرض کنم برای پرسش سوالات باید به سامانه پرسش و پاسخ مراجعه کنید، شاید دوستانی باشن که بتونن بیشتر بهتون کمک کنن.
      و اینکه متاسفانه کد آماده ی این مورد رو ندارم که خدمتتون تقدیم کنم.
      موفق باشید.

  • سلام
    آقای همت یار من چند بار این کد رو برای استفاده برداشتم ولی متاسفانه کار نکرد و دلیل اون هم فقط نبود این کد در اول تابع ها بود

    $(document).ready(function(e)

    لطفا اصلاح کنید تا بقیه به این مشکل دچار نشوند
    با تشکر

    • سلام دوست عزیز
      این دستور رو بدون ready هم میتونید استفاده کنید ، من به همین صورت استفاده میکنم و مشکلی ندارم ، میتونید به سایت جی کوئری هم مراجعه بفرمایید :

      https://api.jquery.com/scroll/

      موفق باشید

  • سلام
    ممنون بابت مطالب آموزنده
    بسیار کمکم کرد
    چند تا ایراد توی برنامه بود
    برا انتخاب mainmenu که با کلاس نام گذاری شده در جاوا حتما نقطه گذاشته بشه وگرنه خطا میده
    بعدش متن صفحه در اندازه ای باشه که اسکرول بده وگرنه قابلیت قابل مشاهده نیست
    برا ایجاد و حذف رویداد کلاس هم نقطه گذاشته بشه

  • واقعا عالی بود خیلی خیلی عالی بود ممنونم از شما و زحماتی فراوانی که برای این مطلب کشیده اید. سپاسگذارم

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

آخرین پرسش و پاسخ ها

اموزش تصادفی

خبرهای باحال دریافت کن

خبرهای باحال دریافت کن

ما هم مثل شما از دریافت ایمیل های مزاحم خوشمون نمیاد. فقط مطالب جدید و خبرهای ویژه رو به اطلاع شما میرسونیم. قول میدیم اسپم نکنیم :)

ثبت نام انجام شد ، لطفا ایمیلی که براتون ارسال میشه رو تایید کنین