Scrolling fixed header not showing on mobile device

问题

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

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.

I've tried changing the Z-index and webkit-backface-visibility.

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

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

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.

回答1:

Does the dropdown not open on mobile devices?

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.

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.

来源：https://stackoverflow.com/questions/54589979/scrolling-fixed-header-not-showing-on-mobile-device

标签

javascript

html

css

header

css-position