javascript - 滚动固定标题不显示在移动设备上

Question

我有一个固定的标题，使用 JS 在滚动时更改为粘性标题。

下拉菜单在 Google Dev Tools 和 Firefox 响应式设计模式下显示的移动 View 中有效，但在实际移动设备上不起作用。

我试过更改 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;
}

移动 View 中菜单的 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。以防菜单超出屏幕底部。