Липкая навигационная панель не реагирует полностью на нажатие на иконку гамбургера - PullRequest
Новая
       14

Липкая навигационная панель не реагирует полностью на нажатие на иконку гамбургера

0 голосов
/ 28 сентября 2018

Я добился того, чтобы панель навигации моей веб-страницы была липкой и наполовину отзывчивой, т.е. она становится короче при изменении размера, но при сокращении щелчок по значку гамбургера открывает меню (параметры панели навигации) в верхней части экрана, где она былаопределяется изначально, вместо того, чтобы экран прокручивался.

HTML-код: 

<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">
    <i class="fas fa-bars"></i>
</a>
</div>

Код CSS: 

@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;
}
}

Код JavaScript: 

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");
    }
}

  var icon = document.querySelector("a.icon");
  icon.addEventListener("click",function(){
    navbar.classList.toggle("responsive");
  })

})

1 Ответ

0 голосов
/ 28 сентября 2018

Чтобы ответить на этот вопрос, вы должны сначала понять концепцию ' POSITIONING ' в CSS.

TLDR; , если вы действительно хотите, чтобы ваш заголовок был липкимпо всей странице вы должны поиграться с позицией : фиксированная

. Для справки вы можете взглянуть на эту ручку 

@media screen and (max-width: 600px){
    .topnav.responsive{position: fixed;}
    .topnav.responsive .icon{
        position: absolute;
        right: 0;
        top: 0;
    }
    .topnav.responsive a{
        float: none;
        display: block;
        text-align: left;
    }
}

это может сработать, вам также может понадобиться назначить z-index значку меню, если он перекрывается с элементами списка.

...