• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

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



  آیا می دانید تا کنون 6253 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

آموزش ایجاد منوی Sticky با CSS و jQuery

13483 ۱۳ بهمن ۹۲

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

کد های CSS

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

 

خوب برای مرحله بعد ما کد های جی کوئری خودمون رو اضافه میکنیم،فرض میکنیم منوی اصلی شما داخل یه تگ div با آیدی top-menu قرار داره،خوب ما هم طبق همین فرض کد ها رو می نویسیم.

کد های jQuery

برای کد های جی کوئری ابتدا یه تابع می نویسیم و افکت مورد نظر رو براش تعریف می کنیم،در ابتدا فاصله اسکرول از بالای پنجره رو در متغییر top ذخیره میکنیم و بعدشم ارتفاع منوی مورد نظر رو دریافت میکنیم حالا چک می کنیم که اگه مقدار top از nav_top زیاد تر شد به منوی ما کلاس sticky که قبلا نوشته بودیم اضافه بشه و در غیر این صورت این کلاس از منوی ما برداشته بشه (به حالت اولیه خودش برمیگرده).

خوب این از تابع ساده ما،حالا برای اجرای این تابع ما کد زیر رو تعریف می کنیم.

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

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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 33 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏

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

    • ‏‏
      کیوان علی محمدی(۶ اردیبهشت ۱۳۹۳)

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

      • ‏‏

        ببخشید ولی منظور من سمت راست بود اشتباه شد.(اون بک گراند خاکستری رو میگم)
        میشه به همراه کد بگید.
        باتشکر.

  • ‏‏

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

  • ‏‏

    میشه همین راه رو با جاوا اسکریپت خالص بگین!

    • ‏‏
      کیوان علی محمدی(۲۶ اردیبهشت ۱۳۹۳)

      اینجا که جاش نیست بگیم باید یه مطلب دیگه باشه،شما با window.onscroll می تونید تابعی برای چک کردن مقدار اسکرول بنویسید،برای مقدار اسکرول هم از document.documentElement.scrollTop یا window.pageYOffset می تونید استفاده کنید،بقیه اش هم یه شرطه دیگه،برای اضافه کردن کلاس هم باید خاصیت className منو رو بگیری و بهش مقدار جدید رو اضافه کنی.مثل این :

      var d = document.getElementById("div1");
      d.className = d.className + " otherclass";

      • ‏‏

        ممنون!
        حالا چطور فاصله المنت رو از بالای پنجره بدست بیاریم که با فاصله اسکرول از بالا مقایسه کنیم!

  • ‏‏

    من این جوری نوشتم اما عمل نمیکنه…!!!!!!!

    • ‏‏
      کیوان علی محمدی(۲۶ اردیبهشت ۱۳۹۳)

      کد تست شده:

      window.onscroll=function(){
      sticky_menu();
      };
      function sticky_menu(){
      var top = window.pageYOffset;
      var nav_top = 50;
      if (top > nav_top) {
      document.getElementById('top-menu').className='sticky';
      } else
      {
      document.getElementById('top-menu').className='';
      }
      }

      اینم لینک تست.

  • ‏‏

    سلام
    ممنون از آموزش خوبتون
    فقط یه مشکل نسبتاً مهم داره:
    توی internet explorer کار نمیکنه. میشه راهنمایی کنید تا مشکلو رفع کنیم؟
    متشکرم

  • ‏‏

    با سلام

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

    • ‏‏
      کیوان علی محمدی(۲۷ مرداد ۱۳۹۳)

      توی آموزش فرض شده که شما منوی خودتون رو از قبل ایجاد کردین و این کدها فقط حالت sticky رو بهش اضافه می کنه،بهتره کدهای منو رو چک کنید.

  • ‏‏

    با سلام
    من میخواهم وقتی sticky menu با صفحه همراه میشود width منو تغییر نکند باید چه قسمتی را ویرایش کنم ؟؟؟؟؟؟؟؟؟

    • ‏‏
      کیوان علی محمدی(۱۵ شهریور ۱۳۹۳)

      سلام،فقط کافیه در کلاس sticky که در بخش css تعریف شده خاصیت width رو از 100% بردارین.

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram