Я создаю веб-страницу с отзывчивой и липкой панелью навигации.Я создал его, чтобы он был липким, но тогда отзывчивость не работает полностью, то есть панель навигации становится короче со значком гамбургера, но эта иконка onClick не работает.
document.addEventListener('DOMContentLoaded', function() {
window.addEventListener('scroll', myFunctionForSticky);
var navbar = document.getElementById("myTopnav");
var sticky = navbar.offsetTop;
function myFunctionForSticky() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky");
} else {
navbar.classList.remove("sticky");
}
}
function myFunctionForResponsive() {
navbar.classList.toggle("responsive");
}
})
@media screen and (max-width: 600px) {
.topnav.responsive {
position: relative;
}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
<div class="topnav" id="myTopnav">
<a href="#home" class="active">Home</a>
<a href="#career">Careers</a>
<a href="#fellowship">Fellowship 2018</a>
<a href="javascript:void(0);" class="icon" onclick="myFunctionForResponsive()">
<i class="fas fa-bars"></i>
</a>
</div>