انجمن برنامه نویسان البرز

تبلیغات

Show و Hide کردن منو به وسیله ی اسکرول موس در Jquery

Show و Hide کردن منو به وسیله ی اسکرول موس در Jquery


با سلام خدمت کاربران عزیز . امروز میخواهیم با نحوه ی ساخت عنصرهایی آشنا بشویم که با اسکرول رو به بالا نمایش و با اسکرول رو به پایین مخفی شوند. برای مثال Show و Hide کردن منو در سایت. قطعه کد زیر را برای درک بهتر موضوع در نظر بگیرید :

See the Pen vJBLRW by Ehsan (@Ehsan-sabouie) on CodePen.


خیلی تکنیکها و ترفندهای بهتر هم برای انجام این کار وجود دارد که performance و بسیاری موارد دیگر رو بهتر اعمال میکند ، اما هدف من نوشتن بسیار بسیار ساده ی کدی است که  Show و Hide کردن منو را نمایش بدهد.
اما خوب کد چه کاری انجام میدهد؟! بسیار ساده . ابتدا یک متغیر تعریف میکنیم که مقدار آن ۰ باشد و در ادامه مقدار Scroll Top صفحه را با استفاده از scroll top function محاسبه میکنیم . سپس از window scroll Function برای این منظور که اعمال کد در زمان اسکرول شدن window استفاده شود بهره میبریم . با یک شرط ساده به window scroll Function میگوییم که اگر از متعیر تعریف شده در مرحله ی اول بزرگتر بود یعنی اینکه اسکرول به سمت پایین حرکت کرده و سپس مقدار فعلی scrollTop صفحه را درون متغیر تعریف شده میریزیم و آن را نگه میداریم. در مرحله ی بعدی مجداد این مقایسه صورت میگیرد با این تفاوت که مقدار ScrollTop صفحه دیگر ۰ نیست. حال اگر بعد از اسکرول صفحه مقدار ScrollTop از مقدار متغیر بیشتر بود اسکرول به سمت پایین بوده و اگر این مقدار کمتر بود اسکرول رو به بالا بوده است.




کلمات کلیدی : جی کوئری

نظر بدهید

یک دیدگاه برای “Show و Hide کردن منو به وسیله ی اسکرول موس در Jquery

  • محمد دانش گفته
    28 جولای 17

    سلام
    ممنون ازتون
    یه سؤال اساسی:

    اگه بخواهیم مثلا بعد از ۵۰ پیکسل اسکرول کردن رو به پایین، عملکرد اجرا بشه چی باید بهش اضافه کنیم؟