Question

我有一个固定的标头，使用JS在滚动时会变成粘性标头。

在移动视图中显示在Google Dev Tools和Firefox Responsive Design Mode上的下拉菜单有效，但在实际的移动设备上不起作用。

我尝试更改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。如果菜单超出了屏幕底部。

滚动固定标头未显示在移动设备上

1 个答案: