افزودن آیکون شبکه اجتماعی شناور با jQuery

  • منتشر شده در تاریخ

افزودن آیکون شبکه اجتماعی شناور با jQuery

اشتراک گذاری صفحه وب در شبکه های اجتماعی (Social Media) برای انتشار سریع مطالب در سطح وسیع تر کاربرد دارد. بنابراین افزودن آیکون شبکه اجتماعی شناور به منظور اینکه کاربران مقالات شما را به اشتراک بگذارند, بسیار مهم است.

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

 

در این آموزش, قصد افزودن آیکون شبکه اجتماعی شناور با jQuery در سایدبار را در همان لحظه همراه با اسکرول شدن صفحه, داریم.

ما از jQuery برای دریافت ویژگی های CSS آیکون های اشتراک گذاری و دستکاری پوزیشن (position) آنها به هتکام اسکرول (scroll) صفحه, استفاده می کنیم. با اسکرول صفحه, کد ما موقعیت صفحه و المنت های آیکون را مقایسه می کند. براساس این مقایسه, position آیکون ها را برای چسبان کردن, تغییر می دهد.

 

کد HTML افزودن آیکون شبکه اجتماعی شناور

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

و استایل های CSS

افزودن آیکون شبکه اجتماعی شناور با jQuery

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

زمانی که اندازه اسکرول بالای صفحه بیشتر از موقعیت بالای آیکون ها باشد, کد ما خاصیت position و top آیکون ها را تغییر می دهد تا بصورت چسبان (sticky) دربیاد.

خروجی : افزودن آیکون شبکه اجتماعی شناور با jQuery

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

افزودن آیکون شبکه اجتماعی شناور با jQuery

امیدوارم از آموزش افزودن آیکون شبکه اجتماعی شناور با jQuery نهایت استفاده را برده باشید .

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

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق و پیروز باشید

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

آموزش های رایگان بیشتر در اینستاگرام ما ...

NETPARADIS /
دیدگاه کاربران

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

    دوره های آموزشی