Прокрутка фиксированного заголовка не отображается на мобильном устройстве

Question

У меня есть фиксированный заголовок, который изменяется на липкий заголовок при прокрутке с использованием JS.

Раскрывающееся меню работает, когда в мобильном представлении отображается в Google Dev Tools и в режиме адаптивного дизайна Firefox, однако оно не работает на реальных мобильных устройствах.

Я пытался изменить Z-index и webkit-backface-visibility.

HTML:

 <header id="myHeader" class="site-header" role="banner">
    <div class="nav-container">
        <nav id="top-bar">
            <div class="row" id="top-bar">
                <div class="top-bar-text">
                </div>
            </div>
        </nav>
        <nav id="site-navigation" class="main-navigation" role="navigation">
            <div class="container nav-bar">
                    <div class="row">
                        <div class="module left site-title-container">
                            <?php shapely_get_header_logo(); ?>
                        </div>
                        <div class="module widget-handle mobile-toggle right visible-sm visible-xs">
                            <i class="fa fa-bars"></i>
                        </div>
                        <div class="module-group right">
                            <div class="module left">
                                <?php shapely_header_menu(); // main navigation ?>
                            </div>
                            <!--end of menu module-->
                        </div>
                        <!--end of module group-->
                    </div>
            </div>
        </nav><!-- #site-navigation -->
    </div>
</header>

header {
height: 85px;
left: 1em;
position: fixed;
z-index: 10000;
right: 1em;
top: 40px;
}    

JS изменяет заголовок при прокрутке на:

.sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #f8b836;
z-index: 999;
height: 90px;
overflow: hidden;
-webkit-transition: height 0.3s;
-moz-transition: height 0.3s;
transition: height 0.3s;
}

CSS для меню в мобильном представлении:

@media (min-width:300px) and (max-width:480px){
#site-navigation .module.left {
    padding-left: 0px;
    position: fixed;
    left: 0;
}
}

JS: window.onscroll = function () {myFunction ()};

var header = document.getElementById("myHeader");
var sticky = header.offsetTop;

function myFunction() {
 if (window.pageYOffset > sticky) {
header.classList.add("sticky");
 } else {
 header.classList.remove("sticky");
}
}

Мне бы хотелось, чтобы в раскрывающемся меню фактически отображалась прокрутка страницы и отображение липкого заголовка.

Answer 1

Не открывается ли раскрывающийся список на мобильных устройствах?

Ваш класс .sticky css имеет overflow: hidden;, который скрывает раскрывающийся список.Если вы поместите его туда, чтобы избежать горизонтальной прокрутки, используйте overflow-x: hidden;.Тогда он не будет отключать выпадающий список.

Обычно вы хотите, чтобы overflow-y был установлен на scroll, когда у вас есть фиксированный элемент с раскрывающимся списком на мобильном телефоне.Если меню выходит за нижнюю часть экрана.