- آموزش طراحی وب - http://www.iranweblearn.com -

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

 Scroll-Down

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

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

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

در این جلسه ی آموزشی در رابطه با رویداد 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 نمایش داده میشه.

 

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

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

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

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