Здраствуйет. я сделал фиксированную бургер меню но есть такая пробелма что при скролле они зависають в самом верху, я как-то сделал так чтобы он не застрял в самом верху но есть такая проблема что моя функция работает только при скролле и если я нажал на меню, он превратился в (Х) он не удет зависать на вверху только при скролле, если я не буду скроллить то он так и останется. Думаю как-то надо сделать так чтобы он проверял высоту всегда а не только при скролле, но не понимаю как это сделать. Если сможете помочь буду рад. Вот Код (код странный но работает):
<div class="header" id="header">
<div class="logo_box">
<div class="display_burger_menu_box">
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
<div id="menu_toggle" class="menu_toggle_lines">
<label for="openSidebarMenu" class="sidebarIconToggle" id="sidebarIconChecked">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>
</div>
<div id="sidebarMenu">
<ul class="sidebarMenuInner">
<li><img src="pxllogo.png" class="display_menu_logo_img" /></li>
<ul class="sidebarMenuText">
<li><a href="https://sani.az" class="text_hover futurica_family">HOME</a></li>
<li><a href="#" class="sidebar_menu_list text_hover futurica_family">FASHION</a></li>
<li><a href="#" class="sidebar_menu_list text_hover futurica_family">BEAUTY</a></li>
<li><a href="#" class="sidebar_menu_list text_hover futurica_family">JEWELRY</a></li>
<li><a href="#" class="sidebar_menu_list text_hover futurica_family">PORTRAIT</a></li>
<li>
<div class="parent">
<div class="menu_drop_title text_hover">
<div class="menu_drop_title_comp text_hover futurica_family">
Lifestyle
<div class="menu_drop_arrow">▼</div>
</div>
</div>
<div class="sub-nav">
<a href="#" class="text_hover futurica_family">Culture</a>
<a href="#" class="text_hover futurica_family">Food</a>
<a href="#" class="text_hover futurica_family">Travel</a>
<a href="#" class="text_hover futurica_family">Astro</a>
</div>
</div>
</li>
<li><a href="#" class="sidebar_menu_list text_hover futurica_family">INTERVIEW</a></li>
<li><a href="#" class="sidebar_menu_list text_hover futurica_family">BAKU</a></li>
</ul>
<hr>
<div class="sidebar_img_button_box">
<div class="sidebar_img_box">
<img src="№poster.jpg" class="sidebar_img">
</div>
<div class="sidebar_button_box">
<a href="https://issuu.com/sanimagazine.baku/docs/jurnal2ci" class="sidebar_nav_button">
GO </a>
<a href="#" class="sidebar_subscribe_button" id="myBtn"> SUBSCRIBE </a>
</div>
</div>
<hr>
<div class="sidebar_icons_box">
<a href="https://instagram.com/sanimagazine.baku?utm_medium=copy_link"><i
class="fa fa-instagram footer_icon sidebar_icon text_hover"
aria-hidden="true"></i></a>
<a href="https://m.facebook.com/sanimagazine.baku/"><i
class="fa fa-facebook footer_icon sidebar_icon text_hover"
aria-hidden="true"></i></a>
<a href="https://www.youtube.com/channel/UCVAV5Vic1uq-wnIdd_kt46A"><i
class="fa fa-youtube-play footer_icon sidebar_icon text_hover"
aria-hidden="true"></i></a>
<a href="https://t.me/sanimagazinebaku"><i
class="fa fa-telegram footer_icon sidebar_icon text_hover"
aria-hidden="true"></i></a>
</div>
</ul>
</div>
</div>
<div class="logo_container">
<div class="logo_img_box">
<a href="#"><img src="pxllogo.png" class="logo_img" /></a>
</div>
</div>
</div>
</div>
var stickymenu = document.getElementById("navMenu")
var stickymenuoffset = stickymenu.offsetTop
window.addEventListener("scroll", function(e) {
requestAnimationFrame(function() {
if (window.pageYOffset > stickymenuoffset) {
stickymenu.classList.add('sticky')
} else {
stickymenu.classList.remove('sticky')
}
})
})
var stickymenuTwo = document.getElementById("menu_toggle")
var stickymenuoffsetTwo = stickymenuTwo.offsetTop
window.addEventListener("scroll", function(e) {
requestAnimationFrame(function() {
if (window.pageYOffset > stickymenuoffsetTwo) {
stickymenuTwo.classList.add('sticky_menu')
} else {
stickymenuTwo.classList.remove('sticky_menu')
}
})
})
var stickymenuChecked = document.getElementById("sidebarIconChecked")
var stickymenuoffsetChecked = stickymenuTwo.offsetTop
window.addEventListener("scroll", function(e) {
requestAnimationFrame(function() {
if (window.pageYOffset > stickymenuoffsetChecked) {
if(stickymenuChecked.classList.contains('sidebar_icon_left')){
stickymenuChecked.classList.add('sticky_menu_checked');
}else {
stickymenuChecked.classList.remove('sticky_menu_checked');
}
} else {
stickymenuChecked.classList.remove('sticky_menu_checked')
}
})
})
document.querySelector("#openSidebarMenu").onclick = function() {
document.querySelector(".part-1").classList.toggle('part-1_checked');
document.querySelector(".horizontal").classList.toggle('horizontal_checked');
document.querySelector(".part-2").classList.toggle('part-2_checked');
document.querySelector(".sidebarIconToggle").classList.toggle('sidebar_icon_left');
document.querySelector(".diagonal.part-2").style = 'margin-top: -9px';
if(stickymenuChecked.classList.contains('sidebar_icon_left')){
document.querySelector(".diagonal.part-2").style = 'margin-top: -9px';
}else {
document.querySelector(".diagonal.part-2").style = 'margin-top: 3px';
}
}
(function() {
let hamburger = {
nav: document.querySelector('#nav'),
navToggle: document.querySelector('.nav-toggle'),
mobLogo: document.querySelector(".mob_logo_box"),
initialize() {
this.navToggle.addEventListener('click', () => {
this.toggle();
});
},
toggle() {
this.navToggle.classList.toggle('expanded');
this.nav.classList.toggle('expanded');
this.mobLogo.classList.toggle('mob_logo_off')
},
};
hamburger.initialize();
}());
