ثابت کردن منو در بالای سایت هنگام اسکرول

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

شاید تا به حال دیده باشید که در برخی از وبسایت ها، با اسکرول کردن صفحه منو همچنان در بالای سایت ثابت می ماند

راه حل بسیار ساده هستش فقط کافیست طبق آموزش زیر جلو برید

ابتدا کد زیر را بدون هیچ تغیری در فایل style.css خود، در انتهای کد ها قرار دهید

سپس کد زیر را در فایل js خود قرار دهید

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

در کد های js بالا، در خط زیر

به جای 200  مقدار پیکسی که تمایل دارید بعد از اسکرول شدن، منو را ثابت کند را وارد کنید

و در کد های js بالا، در خط زیر

به جای header-top نام کلاس منوی خود را وارد کنید تا بعد از اسکرول شدن، آن من وبرای شما ثابت بماند

موفق باشید

راستی! جهت دریافت ویدئو های رایگان، عضو پیج اینیستاگرام ما شوید.

اگر در مورد این آموزش سوالی داشتید حتما در بخش دیدگاه ها ارسال کنید تا پاسخگوی شما باشیم

نیاز به مشاوره جهت حل مشکلات وبسایتتان را دارید؟

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

درباره میلاد علیزاده وکیلی

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

مطالب زیر را حتما بخوانید

دیدگاه ها

  1. مجتبی گفت:

    سلام
    منوی من عمودیه و با المنتور هم کار شده
    وقتی صفحه اسکرول میشه به پایین ، نصب منو روی فوتر میره . این مشکل رو چطوری میشه حل کرد؟
    ممنون میشم راهنمایی کنید

    1. میلاد علیزاده وکیلی گفت:

      وقت بخیر دوست عزیز
      امیدوارم حالتون عالی باشه
      از خاصیت z-index میتونین استفاده کنید و z-index فوتر رو بیشتر از منوی خود قرار بدین
      سوالی داشتید حتما بپرسید بنده پاسخگو هستم
      اگر پاسخ ارسال شده کمکتان نکرد، لطفا آدرس وبسایت رو ارسال کنید تا دقیق تر راهنمایی کرده و کد مربوطه را برایتان ارسال کنیم
      موفق باشید

دیدگاهتان را بنویسید

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