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

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

دسته بندی موضوعات
سفارش تبلیغات

رویداد 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 نمایش داده میشه.

 

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

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

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

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

<<

>>

اگر این آموزش برای شما مفید بود با دوستان خود به اشتراک بگذارید



سفارش تبلیغات

گردآوری و تالیف : میترا رحیمی

بنیانگذار و نوسنده در مدرسه مجازی ایرانیان و سردبیر ماهنامه طراحی وب همچنین مدرس و مسلط به برنامه نویسی سمت سرور با PHP MVC و برنامه نویسی سمت کلاینت با html 5 , css3 , jquery , مبانی سئو و سیستم مدیریت محتوای وردپرس

خوراک خوشمزه و علمی روزانه
با وارد کردن ایمیلتون در فیلد روبرو آموزش های جذاب و vip دریافت نمایید

آموزش های مرتبط با این مطلب

دیدگاه های مخاطبین

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

  • saber

    با سلام
    ببخشید این رویداد یا کد
    منظورتون همین منوی سایتتونه؟؟؟!؟
    ممنون

    • میترا رحیمی

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

  • امیرحسین احمدی

    خیلی خیلی ممنون

  • محمدخداکریمی

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

    • میترا رحیمی

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

  • امیرحسام

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

    $(document).ready(function(e)

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

    • میترا رحیمی

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

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

      موفق باشید

  • عابدین

    بسیار عالی چطور میتونم با php این کد رو بنویسم

  • مهدی

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

  • جواد

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

وبلاگ مدرسه

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

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

    مدرس ، طراح رابط کاربری وب و موبایل با 8 سال سابقه ی فعالیت حرفه ای

سوابق کامل

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

آخرین پرسش و پاسخ ها
شما هم سوالی دارید ؟