I am trying to make the navbar Hamburger on mobile view responsive and sticky on scroll on 320px, 375px, and 425px screen sizes. I would like to have a solution in vanilla js and 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;
   }
}

and I tried this jquery code but I want to use it in vanilla js so that it works properly.

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();