Estoy tratando de hacer que la barra de navegación Hamburger en la vista móvil responda y se mantenga pegajosa al desplazarse en tamaños de pantalla de 320px, 375px y 425px. Me gustaría tener una solución en vanilla js y CSS. https://360-consulting-test-2022.661300286228.hostingkunde.de/

 .g-offcanvas-toggle { background: #4B7EC0; color: #fff; top: 55px; right: 15px; border-radius: 3px; transition: none !important; -webkit-transition: none !important; -moz-transition: none !important;} @media (max-width: 425px) { .g-offcanvas-toggle { top: 67px !important; } @media only screen and (min-width: 320px) and (max-width: 375px) { g-offcanvas-toggle { top: 60px !important; } @media (max-width:320px) { .g-offcanvas-toggle { top: 90px !important; } }

y probé este código jquery pero quiero usarlo en vanilla js para que funcione correctamente.

 var header = $('#g-navigation'); var offcanvas = $('.g-offcanvas-toggle'); var headerHeight = header.outerHeight(); var stickyHeaderTop = header.offset().top; var stickyHeader = function () { var scrollTop = $(window).scrollTop(); if (scrollTop > stickyHeaderTop) { offcanvas.css('position', 'fixed').css('top','20px'); } else { offcanvas.css('position', 'absolute').css('top', '55px'); } }; stickyHeader();