Fixed Top منو

شما بهتره از sticky-top استفاده کنید که با اسکرول تریگر میشه

ممنون از شما
مشکل تاپ حل شد با sticky-top

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

درود @aliparand عزیز🙂
برای این کار شما باید از جاوا اسکریپت و جی کوئری کمک بگیری
تا هنگام اسکرول منوی اول display : none بشه و منوی دوم با یک انیمیت ظاهر بشه
به مثال زیر دقت کنید

jQuery(document).ready(function( $ ){ 
    jQuery(window).scroll(function(){ 
        if ($(window).scrollTop() >= 100) {
            $('.show').fadeIn(); 
        } else { 
            $('.show').fadeOut(); 
        }
    });
});

میتونید از متد های myvarmenu.hide و myvarmenu2.show هم در JS استفاده کنید
امیدوارم بتونه کمکتون کن🤗

متاسفانه من جی کوئری و جاوا بلد نیستم

بازم مرسی از پاسختون

از این نمونه استفاده کن🤗
نمونه

سلام! برای حل مشکل مارجین تاپ که بعد از اسکرول سر جا می‌ماند، می‌توانید از کمک CSS و JavaScript استفاده کنید. ابتدا به عنوان یک راه حل CSS، می‌توانید از تکنیک "fixed" برای المان منو استفاده کنید. با این کار، منو همواره در نقطه‌ای ثابت نسبت به صفحه قرار می‌گیرد، بنابراین مارجین تاپ ثابت خواهد ماند حتی پس از اسکرول.

مثال کد CSS:

.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
}

در کد بالا، .navbar یک کلاس است که به المان منوی شما اختصاص داده می‌شود. با اعمال position: fixed; و top: 0;، منو در بالای صفحه قرار می‌گیرد و با width: 100%; عرض آن تمام صفحه است. همچنین با z-index: 100; اطمینان حاصل می‌شود که منو بالاتر از سایر المان‌ها قرار بگیرد.

در مورد افکت پنهان شدن و نمایش دوباره منو با افکت "ease" که در وبسایتی که لینک آن را فرستادید مشاهده کرده‌اید، می‌توانید از تکنیک‌های CSS و JavaScript استفاده کنید. برای رسیدن به این نتیجه، می‌توانید از CSS Transitions و JavaScript Events استفاده کنید.

اولین قدم، ایجاد ترانزیشن با استفاده از CSS است:

.navbar {
  transition: opacity 0.3s ease;
}

.navbar.hidden {
  opacity: 0;
}

در کد بالا، با استفاده از transition: opacity 0.3s ease;، ترانزیشن برای خاصیت opacity تعریف می‌شود. با اعمال .navbar.hidden، opacity به 0 تنظیم می‌شود و به این ترتیب منو پنهان می‌شود.

سپس با استفاده از JavaScript، می‌توانید کلاس .hidden را به منو اضافه و حذف کنید تا افکت مورد نظر را به‌دست آورید.

برای مثال:

window.addEventListener('scroll', function() {
  var navbar = document.querySelector('.navbar');
  if (window.scrollY > 0) {
    navbar.classList.add('hidden');
  } else {
    navbar.classList.remove('hidden');
  }
});

کد بالا، به وقوع افتادن رویداد scroll را گوش می‌دهد و در صورتی که صفحه بالاتر از 0 اسکرول شود، کلاس .hidden به المان منو اضافه می‌کند. در غیر این صورت، کلاس .hidden را از المان منو حذف می‌کند.

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