滚动未在移动设备上显示的固定标头 [英] Scrolling fixed header not showing on mobile device

问题描述

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

I have a fixed header that changes to a sticky header on scroll using JS.

下载菜单在Google Dev Tools和Firefox响应式设计模式下显示移动视图时有效，但它不适用于实际的移动设备。

The dropdown menu works when in mobile view showing on Google Dev Tools and Firefox Responsive Design Mode, however it doesnt work on actual mobile devices.

我尝试更改Z-index和webkit-backface-visibility。

I've tried changing the Z-index and 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将滚动标题更改为：

JS changes the header on scroll to:

.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：

The CSS for the menu in mobile view:

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

JS：
window.onscroll = function（）{myFunction（）};

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

我希望实际显示下拉菜单页面已滚动并显示粘性标题。

I'd like the dropdown menu to actually show when the page has been scrolled and the sticky heading is showing.

推荐答案

下拉列表是否未在移动设备上打开？

Does the dropdown not open on mobile devices?

你的.sticky css类有 overflow：hidden; 这样可以隐藏下拉列表。如果你把它放在那里以避免水平滚动，请改用 overflow-x：hidden; 。然后它不会削减下拉列表。

Your .sticky css class has overflow: hidden; which is keeping the dropdown hidden. If you put it there to avoid horizontal scrolling, use overflow-x: hidden; instead. Then it won't cut the dropdown off.

通常你想要 overflow-y 设置为滚动当你有一个带有移动下拉列表的固定元素时。如果菜单超出了屏幕底部。

Generally you want overflow-y set to scroll when you have a fixed element with a dropdown on mobile. In case the menu extends beyond the bottom of the screen.

这篇关于滚动未在移动设备上显示的固定标头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！