که بیشتر و بیشتر در صفحات وبلاگ ها و منابع دیگر یافت می شوند. استفاده از چنین نوارهای ناوبری کاملاً موجه است. یکی از دلایل اصلی استفاده فعال از این افزونه های جی کوئری این است که منو همیشه در دسترس بازدیدکنندگان است، حتی اگر در پایین صفحه باشد. علاوه بر این، یک منوی ثابت فضای کمی را اشغال می کند و توجه را از محتوای اصلی منحرف نمی کند. به طور کلی، یک منوی ثابت، قابلیت استفاده سایت را بهبود می بخشد.
من مجموعه ای از بهترین افزونه های رایگان جی کوئری را برای پیاده سازی یک منوی ثابت به نظر من گردآوری کرده ام. من سعی کردم اطمینان حاصل کنم که هر یک از افزونه ها به نوعی منحصر به فرد هستند، به طوری که هر افزونه ای از انتخاب شده می تواند به طور خاص در پروژه شما استفاده شود. در مجموعه می توانید افزونه های ساده و پیچیده تر با انیمیشن و غیره را بیابید.
اگر به یک منوی ثابت بسیار ساده نیاز دارید، چیزی شبیه نحوه پیاده‌سازی یک پنل چسبنده با دکمه‌های اجتماعی، می‌توانید بدون افزونه‌های jQuery این کار را انجام دهید، زیرا بارگذاری صفحه با اسکریپت‌ها خیلی خوب نیست، اما در مقاله‌های بعدی در مورد این موضوع صحبت خواهیم کرد. در کانال یا صفحات ما مشترک شوید تا مطالب جالب را از دست ندهید.
بنابراین. در اینجا 6 افزونه jQuery برای ایجاد یک منوی ثابت آورده شده است.

پلاگین ناوبری ثابت Sticky HeaderjQuery پنهان کردن خودکار، که بر اساس اصل مشابه اسکریپت بالا کار می کند، اما کمتر روان است، اگرچه، در نگاه اول، کمی ساده تر است. متأسفانه ، نمی توانم بگویم که ناوبری کاملاً تطبیقی ​​است ، زیرا در صفحه های کوچک موارد منو فقط به اعداد تبدیل می شوند ، که بسیار عجیب است.

On Scroll Header Effects پلاگین قدرتمند جی کوئری برای نوار ناوبری ثابت. هنگام پیمایش می توانید بخش های خاصی را در صفحه تنظیم کنید که با رسیدن به آنها پانل تغییر می کند و می تواند کاملاً تغییر کند ظاهر. می تواند هر تعداد از این بخش ها در یک صفحه وجود داشته باشد.

On-Scroll Animated Header یک افزونه خوب برای پیاده سازی نوار ناوبری چسبنده. این کار به این صورت است: در همان ابتدای صفحه، یک هدر بلند حاوی لوگو و منو را می بینیم. هنگام پیمایش، ناحیه سرصفحه با همه عناصر، از جمله لوگو و ناوبری، به آرامی با استفاده از ویژگی‌ها کاهش می‌یابد و به نوار باریکی تبدیل می‌شود که به بالای صفحه چسبیده است.

با سلام خدمت خوانندگان محترم سایت وبلاگ. این بیشتر یک یادداشت برای خودم است، تا فراموش نکنم وقتی می‌خواهم همه چیز را برگردانم دقیقاً چه کار کردم. همه چیز از آنجا شروع شد که یکی از خوانندگان پیشنهاد نوشتن در مورد افزونه ای برای وردپرس به نام Q2W3 Fixed Widget (Sticky Widget) را داد که می تواند هر ویجتی را در نوار کناری شناور کند یا به عبارت دیگر ثابت کند.

آن ها همانطور که صفحه را اسکرول می کنید، می بینید که قسمت اصلی نوار کناری بالا می رود، اما ویجتی که در پایین قرار دارد، مهم نیست که چقدر متن را پایین می آورید، در ناحیه مشاهده باقی می ماند. فوراً می گویم چه پستی بگذارم تبلیغات متنیاین ممنوع است و می تواند برای آن مجازات شود (همانطور که در نظرات مشخص شد - YAN این اجازه را می دهد ، اما Adsense انجام این کار را ممنوع می کند).

افزونه عالی است، اما ویجت ها در موضوع من غیرفعال هستند، بنابراین تصمیم گرفتم این وظیفهبا استفاده از چند خط کد جاوا اسکریپت که در اینترنت پیدا کردم.

در نتیجه، منوی بالای من در بالای پنجره نمایش ثابت می شود (در واقع، فقط کد CSS برای این کار کافی بود، اما ما به دنبال راه های آسانی نیستیم)، و قسمت پایینهنگامی که هنگام پیمایش صفحه به آن می‌رسید، نوار کناری در سمت راست بالای صفحه ثابت می‌شود. من نمی دانم که آیا این مورد فایده ای خواهد داشت یا خیر، اما راه حل واقعا ساده است.

چرا منو را اصلاح می کنیم و یک نوار کناری شناور می سازیم؟

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

از سوی دیگر، نفوذ بیش از حد چنین پنل ثابتی ممکن است واکنش منفی خوانندگان را به همراه داشته باشد، بنابراین سوال در مورد مفید بودن این عمل همچنان باز است. شما باید بعد از یک هفته استفاده به نتیجه نگاه کنید - اگر منو دیگر ثابت نیست (به لبه بالای ناحیه مشاهده میخکوب شده است)، آزمایش شکست خورده است. در هر صورت، من یک اسکرین شات از نحوه وقوع همه چیز می‌گیرم.

نوار کناری شناور در وردپرس به دلیل کمی متفاوت ساخته شده است - برای جلب توجه بیشتر به چیزی. در اصل، در اینجا می‌توانید هم فهرستی از دسته‌ها و هم فهرستی از پست‌های پرطرفدار یا اخیر را درج کنید، که دوباره سعی می‌کند در خدمت بهبود موارد رفتاری باشد. اما بیشتر اوقات، تبلیغات در چنین بلوک شناور قرار می گیرد (همانطور که قبلاً اشاره کردم تبلیغات متنی مجاز نیست) که صرفاً به صورت فرضی باید درآمد مدیر وب سایت را افزایش دهد. یک هفته دیگه نتیجه رو ببینیم

نحوه اصلاح منوی بالا در وردپرس

من یک راه حل برای خودم در این صفحه پیدا کردم - چگونه یک بلوک یا منو در یک وب سایت را برطرف کنم. برای استفاده این روشباید متصل شود کتابخانه جی کوئری. نحوه انجام این کار به طور مفصل در مقاله بارگذاری محتوا توضیح داده شد.

اگر به خاطر داشته باشید، در مقاله در مورد بهینه سازی سرعت بارگذاری صفحه، باید سعی کنید تمام CSS و JS را در یک مورد مشترک (به معنای دو - یکی برای استایل ها و دیگری برای اسکریپت ها) ترکیب کنید. بنابراین، در واقع، من خطوط کدی را که دقیقاً در زیر آورده شده است به چنین فایلی اضافه کردم. اگرچه می توانید مستقیماً آنها را به آن اضافه کنید کد HTML، توسط برچسب های اسکریپت احاطه شده است. به عنوان مثال، این کار را می توان در قالب header.php در داخل تگ های head انجام داد.

همچنین می توانید با استفاده از منوی بالا را اصلاح کنید CSS خالص- برای کمک به ما. در واقع، موقعیت یابی نیز در اینجا با استفاده از این مورد استفاده می شود ویژگی های CSS، اما همچنین می توان شروع به نمایش یک منوی ثابت نه بلافاصله، بلکه مدتی پس از شروع پیمایش (در فاصله معینی از بالا) کرد.

در مورد من، کد اصلاح منوی بالا به این صورت است:

$(function())($(window).scroll(function() ( var top = $(document).scrollTop(); if (بالا< 10) $("#navi").css({top: "0", position: "relative"}); else $("#navi").css({top: "0px", width: "100%", position: "fixed"}); }); });

به شما یادآوری می کنم که می توانید این قطعه کد را در:

فایلی با پسوند js که در پوشه ای با موضوع مورد استفاده شما (/wp-content/themes/theme) قرار دارد. فقط در صورتی برای شما مناسب است که در فایل header.php خطی برای بارگذاری آن به همراه صفحات وب سایت شما نوشته شده باشد که ممکن است به شکل زیر باشد:

برای نتیجه گیری می توانید از خود فایل header.php استفاده کنید این کدبین تگ‌های سر باز و بسته و قرار دادن آن در تگ‌های اسکریپت، به عنوان مثال: $(function())($(window).scroll(function() ( var top = $(document).scrollTop(); if (بالا< 10) $("#navi").css({top: "0", position: "relative"}); else $("#navi").css({top: "0px", width: "100%", position: "fixed"}); }); });

همچنین می توانید این کد را در تگ های اسکریپت در هر مکان دیگری بنویسید. نکته اصلی این است که بارگذاری می شود صفحات مناسبوبلاگ. به عنوان مثال، می توانید این کار را در footer.php قبل از بسته شدن تگ بدن انجام دهید.

حالا بیایید مستقیماً به این کد نگاه کنیم. به نظر می رسد که 10 پیکسل از بالا موقعیت یابی نسبیبا یک ثابت جایگزین می شود (مقاله را در لینک داده شده در بالا ببینید). در صورت لزوم، در خط با else می‌توانید مقدار غیر صفر را برای بالا انتخاب کنید، و سپس منوی ثابت در بالا از لبه بالایی درگاه نمایش خارج می‌شود. ارزش داده شدهپیکسل (به نظر من، این غیر ضروری است).

برخلاف کد اصلی، من باید عرض را نیز اضافه کنم: "100٪"، زیرا در غیر این صورت اندازه منو از عرض کم می شود که کل تصویر را خراب می کند.

نگاه کنید، برای وضوح، من کد Html را که با آن منوی بالایی در من تشکیل می شود، ارائه می کنم قالب وردپرسوبلاگ (در فایل header.php من زندگی می کند):

• جدید
• بهترین
• از کجا کسب درآمد کنیم
• تبلیغات
• نقشه سایت
• مخاطب
• بالا

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

• لطفاً توجه داشته باشید که اگر در کدی که در echo "" محصور شده است، نقل‌قول‌های تکی وجود داشته باشد، باید از آنها خارج شوند، یعنی. جلوی هر کدام از آنها یک اسلش (\") البته بدون پرانتز بگذارید.

  به طور کلی، همانطور که معلوم شد، معلوم شد. شما باید خودتان تصمیم بگیرید که چگونه به طور خاص این موضوع را به موضوع خود بچسبانید - وقتی زمان دارید، حتی سرگرم کننده است که "مغز خود را جمع کنید". متشکرم.

  موفق باشی! به زودی شما را در صفحات سایت وبلاگ می بینیم

  ممکن است علاقه مند باشید

  WebPoint PRO یک تم وردپرس پاسخگو با عملکرد گسترده و بهینه سازی فنی مناسب برای موتورهای جستجو است
  Share42 - اسکریپتی برای اضافه کردن دکمه ها و نشانک های شبکه های اجتماعی به سایت (یک گزینه پانل شناور وجود دارد)

  هنگام ایجاد یک وب سایت، اغلب نیاز به در نظر گرفتن منوی افقی وجود دارد که شامل ناوبری اصلی سایت است. روش "تثبیت" منوی افقی از نظر بازدیدکننده که "همیشه ناوبری را در اختیار دارد" راحت است، مهم نیست که چقدر چرخ را پایین یا بالا بچرخانید.

  رفع منوی افقی با CSS: position:fixed

  از یک طرف، همه چیز با استفاده از CSS در کمترین زمان ساده و آسان است. نمونه ای از طرح بندی HTML یک منوی افقی ثابت:

  • خانه
  • اخبار
  • مخاطب
  • جستجو کردن
  [محتوای صفحه] [پانویس سایت]

  چیدمان CSS یک منوی افقی ثابت:

  # منو-بالا-تقریباً ثابت (موقعیت: ثابت؛ بالا: 10 پیکسل؛ سمت چپ: 0؛ ارتفاع: 30 پیکسل؛ عرض: 100٪؛ حاشیه: 0؛ )

  حالا بیایید تورفتگی محتوای صفحه را برابر با ارتفاع منو قرار دهیم:

  #محتوا (حاشیه بالا: 30 پیکسل؛ )

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

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

  رفع منوی افقی با استفاده از جاوا اسکریپت

  بنابراین، اجازه دهید زمانی که منو در پشت سرصفحه سایت قرار می گیرد، گزینه ای را در نظر بگیریم، اما اگر بازدیدکننده فعالانه به پایین پیمایش کند، منو در بالا «ثابت» شده و در جای خود باقی می ماند. هدر سایت قابل مشاهده نیست. اگر بازدید کننده به هدر صفحه برگردد، منو در جای خود «پشت سرصفحه سایت» می شود. برای شروع، در اینجا طرح‌بندی کامل HTML یک صفحه‌آرایی نمونه است:

  آرم وب سایت بنر شعار وب سایت

  • خانه
  • اخبار
  • مخاطب
  • جستجو کردن
  [محتوای صفحه] [پانویس سایت]

  الگوی وب سایت ما از چندین بخش معمولی تشکیل شده است:

  • سرصفحه های سایت – #سرتیتر، ارتفاع 150 پیکسل
  • منوی افقی – #منو-بالا-تقریباً ثابت است– ارتفاع 30 پیکسل
  • قسمت اطلاعات اصلی صفحه – #محتوا,
  • فوتر سایت - #پانویس.

  در اینجا طرح CSS آمده است:

  #menu-top-almost-fixed( موقعیت: ثابت؛ حاشیه: 0؛ سمت چپ: 0؛ بالا: 150 پیکسل؛ ارتفاع: 30 پیکسل؛ ) #header( نمایش: بلوک؛ ارتفاع: 150 پیکسل؛ سرریز: پنهان؛ موقعیت: نسبی؛ حاشیه -bottom: 55px؛ ) #menu-top-almost-fixed ul, #menu-top-almost-fixed li( style-list: none; margin: 0; padding: 0; ) #menu-top-almost-fixed ul (نمایش: بلوک؛ تراز نوشتاری: مرکز؛ عرض: 100%؛ شناور: چپ؛ ) #menu-top-almost-fixed ul li(نمایش: خطی؛ ارتفاع خط: 30 پیکسل؛ عرض: 120 پیکسل؛ بالشتک: 0 5 پیکسل تراز متن: مرکز؛ )

  ابتدا بیایید یک تورفتگی از سربرگ به محتوا به اندازه ارتفاع منوی خود + یک تورفتگی کوچک با حاشیه برای زیبایی زیبایی تعیین کنیم. #header ( حاشیه-پایین: 55 پیکسل؛ ) . بیایید منوی خود را درست در پشت سربرگ اصلاح کنیم: #menu-top-almost-fixed( موقعیت: ثابت؛ حاشیه: 0؛ سمت چپ: 0؛ بالا: 150 پیکسل؛ ارتفاع: 30 پیکسل؛ ) .

  حالا بیایید مطمئن شویم که هنگام اسکرول کردن، منو دقیقاً در بالای صفحه "رفع" می شود. بیایید جاوا اسکریپت زیر را بین و قرار دهیم:

  جاوا اسکریپت:

  var m1 = 150; /* ارتفاع هدر بر حسب پیکسل */ var m2 = 2; /* تورفتگی زمانی که هدر دیگر در حین پیمایش قابل مشاهده نیست */ var menuID = "menu-top-almost-fixed"; /* شناسه منوی افقی برای پین کردن */ var menuOpacityOnChange = "0.7"; /* شفافیت منو هنگام پیمایش: 1 - مات، 0.5 - شفاف 0.0 - کاملاً شفاف */ var menuOpacityOnChangeIE = menuOpacityOnChange * 100; تابع /* برای تعیین تورفتگی از بالای سند تا موقعیت فعلی پیمایشگر از طریق مرورگر */ تابع getScrollTop() ( var scrOfY = 0; if(typeof(window.pageYOffset) == "تعداد" ) (//نتاسکیپ سازگار scrOfY = window.pageYOffset ; ) else if(document.body && (document.body.scrollLeft || document.body.scrollTop)) (//DOM سازگار scrOfY = document.body.scrollTop; ) else if(document.documentElement && (document.documentElement. scrollLeft || document.documentElement.scrollTop)) ( //IE6 Strict scrOfY = document.documentElement.scrollTop; ) scrOfY; ) /* تابعی را که بالشتک بالایی را برای یک تنظیم می کند منوی افقی ثابت بسته به موقعیت اسکرول و هدرهای دید */ تابع () +m2< m1) { s.style.top = (m1-top) + "px"; s.style.filter = s.style.filter.replace("progid:DXImageTransform.Microsoft.Alpha(opacity="+menuOpacityOnChangeIE+")",""); s.style.opacity = "1"; } else { s.style.top = m2 + "px"; s.style.opacity = menuOpacityOnChange; s.style.filter = s.style.filter.replace("progid:DXImageTransform.Microsoft.Alpha(opacity="+menuOpacityOnChangeIE+")",""); s.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity="+menuOpacityOnChangeIE+")"; } } } /** функция регистрирует вычисление позиции «плавающего» меню при прокрутке страницы **/ function setMenuPosition(){ if(typeof window.addEventListener != "undefined"){ window.addEventListener("scroll", marginMenuTop, false); } else if(typeof window.attachEvent != "undefined"){ window. attachEvent("onscroll", marginMenuTop); } marginMenuTop(); } /** регистрируем вызов необходимых функций после загрузки страницы **/ if(typeof window.addEventListener != "undefined"){ window.addEventListener("load", setMenuPosition, false); } else if(typeof window.attachEvent != "undefined"){ window. attachEvent("onload", setMenuPosition); }

  با دنبال کردن این لینک و استفاده از چرخ اسکرول می توانید نمونه ای از پیاده سازی را مشاهده کنید. بنابراین، همه چیز در اینجا ساده است. در تنظیمات، پارامترهای زیر را به اسکریپت ارسال می کنیم:

  • var m1 = 150; - ارتفاع هدر بر حسب پیکسل،
  • var m2 = 2; - تورفتگی زمانی که هدر دیگر در حین پیمایش قابل مشاهده نیست،
  • var menuID = "منو-بالا-تقریباً ثابت"; - شناسه منوی افقی برای پین کردن،
  • var menuOpacityOnChange = "0.7"; - شفافیت منو هنگام پیمایش:
    • 1 - مات
    • 0.5 - نیمه شفاف
    • 0.0 - کاملا شفاف

  در این نسخه، منوی خود را کمی تنظیم کرده ایم و هنگام اسکرول به آن شفافیت اضافه می کنیم. یک گزینه کلاسیک تر بلافاصله خود را نشان می دهد، زمانی که ما شفافیت منو را تغییر نمی دهیم، بلکه به سادگی یک پس زمینه برای منو به شکل پس زمینه با رنگ منو و یک حاشیه شفاف پایین تر (که در آن شیب به آرامی "انتقال می یابد" ایجاد می کنیم. از رنگ مات به رنگ شفاف):

  بیایید کمی طرح‌بندی CSS را برای منوی ثابت افقی خود تغییر دهیم:

  #menu-top-almost-fixed( موقعیت: ثابت؛ حاشیه: 0؛ چپ: 0؛ بالا: 150 پیکسل؛ ارتفاع: 30 پیکسل؛ پس‌زمینه: url (./images/white-gradient-l.png) پایین سمت چپ تکرار-x ;)

  حالا بیایید کد جاوا اسکریپت اصلاح شده را بدهیم که بین و قرار می دهیم:

  جاوا اسکریپت:

  var m1 = 150; /* ارتفاع هدر بر حسب پیکسل */ var m2 = 0; /* تورفتگی زمانی که هدر دیگر در حین پیمایش قابل مشاهده نیست */ var menuID = "menu-top-almost-fixed"; تابع /* برای تعیین تورفتگی از بالای سند تا موقعیت فعلی پیمایشگر از طریق مرورگر */ تابع getScrollTop() ( var scrOfY = 0; if(typeof(window.pageYOffset) == "تعداد" ) (//نتاسکیپ سازگار scrOfY = window.pageYOffset ; ) else if(document.body && (document.body.scrollLeft || document.body.scrollTop)) (//DOM سازگار scrOfY = document.body.scrollTop; ) else if(document.documentElement && (document.documentElement. scrollLeft || document.documentElement.scrollTop)) ( //IE6 Strict scrOfY = document.documentElement.scrollTop; ) scrOfY; ) /* تابعی را که بالشتک بالایی را برای یک تنظیم می کند منوی افقی ثابت بسته به موقعیت اسکرول و هدرهای دید */ تابع () +m2< m1) { s.style.top = (m1-top) + "px"; } else { s.style.top = m2 + "px"; } } } /** функция регистрирует вычисление позиции «плавающего» меню при прокрутке страницы **/ function setMenuPosition(){ if(typeof window.addEventListener != "undefined"){ window.addEventListener("scroll", marginMenuTop, false); } else if(typeof window.attachEvent != "undefined"){ window. attachEvent("onscroll", marginMenuTop); } } /** регистрируем вызов необходимых функций после загрузки страницы **/ if(typeof window.addEventListener != "undefined"){ window.addEventListener("load", setMenuPosition, false); } else if(typeof window.attachEvent != "undefined"){ window. attachEvent("onload", setMenuPosition); }

  بنابراین، همه چیز در اینجا ساده است. در تنظیمات، پارامترهای زیر را به اسکریپت ارسال می کنیم:

  • var m1 = 150; - ارتفاع هدر بر حسب پیکسل،
  • var m2 = 0; - تورفتگی زمانی که هدر دیگر در حین پیمایش قابل مشاهده نیست.
  منو به خوبی کار می کند، اما اگر صفحه را دوباره بارگیری کنید، منو با اولین تورفتگی ظاهر می شود

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

  تابع setMenuPosition())( if(typeof window.addEventListener != "undefined")( window.addEventListener("scroll", marginMenuTop, false); ) other if(typeof window.attachEvent != "undefined")( window. attachEvent ( "onscroll", marginMenuTop); ) );

  به کد زیر:

  تابع setMenuPosition())( if(typeof window.addEventListener != "undefined")( window.addEventListener("scroll", marginMenuTop, false); ) other if(typeof window.attachEvent != "undefined")( window. attachEvent ( "onscroll", marginMenuTop); ) marginMenuTop(); );

  پس از بارگیری صفحه، ما بلافاصله تابع marginMenuTop خود را فراخوانی می کنیم که موقعیت منو در صفحه را بررسی می کند و سبک مورد نظر را اعمال می کند.

  پیاده سازی منوی نیمه ثابت با استفاده از افزونه Afixx jQuery از توییتر Bootstrap

  در ادامه این مبحث مقاله ای در مورد پیاده سازی منوی تقریبا ثابت با استفاده از افزونه jQuery Affix از فریم ورک بوت استرپ توییتر برای شما نوشته شد.

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

  نحوه کار به این صورت است که وقتی صفحه بارگذاری می شود، منو در یک مکان خاص از صفحه قرار می گیرد (مثلاً در زیر "هدر") و وقتی صفحه را اسکرول می کنید، در بالای پنجره مرورگر ثابت می شود و مانند سایر مطالب پیمایش نمی کند.

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

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

  ابتدا باید کتابخانه jQuery را برای سایت متصل کنیم

  < script src= "//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" >

  می توانید به صورت محلی یا از طریق گوگل متصل شوید.

  برای اتصال به صورت محلی، باید فایل jQuery را از وب سایت رسمی http://jquery.com/ دانلود کنید.

  CSS

  

  جاوا اسکریپت

  

  در اسکریپت، 2 متغیر ایجاد می کنیم که در آن مقادیر ارتفاع هدر و تورفتگی بلوک را با منوی بالا ذخیره می کنیم. ممکن است هیچ تورفتگی وجود نداشته باشد (مانند این مورد). سپس یک handler برای رویداد onScroll شی پنجره می نویسیم. در آن با استفاده از متد scrollTop() فاصله بالای صفحه تا موقعیت فعلی اسکرول را محاسبه می کنیم. بر اساس محاسبه، بلوک را با منو قرار می دهیم.

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

  اولین کاری که ما انجام می دهیم این است که کد HTML خود را در مکانی در سایت خود قرار دهید که می خواهید منو را ببینید.

  • خانه
  • وردپرس
  • HTML5 و CSS3
  • PHP

  به منو کلاس پیش‌فرض اختصاص داده می‌شود که به لطف آن jquery ما می‌تواند تعیین کند که این بلوک خاص باید به بالا پین شود.

  2. کد جی کوئری

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

  $(document).ready(function())( var $menu = $("#menu"); $(window).scroll(function())( if ($(this).scrollTop() > 100 && $ menu. hasClass("پیش‌فرض")) ($menu.fadeOut("سریع"، تابع()) ($(this).removeClass("پیش‌فرض") .addClass("transbg ثابت") .fadeIn("سریع") ; )) ; ) else if($(this).scrollTop()