我有一个固定的标题,使用 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");
}
}
我希望下拉菜单在页面滚动和显示粘性标题时实际显示。
最佳答案
下拉菜单在移动设备上打不开吗?
您的 .sticky CSS 类具有 overflow: hidden;
,它使下拉列表保持隐藏状态。如果将它放在那里以避免水平滚动,请改用 overflow-x: hidden;
。然后它不会切断下拉菜单。
当您在移动设备上有一个带有下拉菜单的固定元素时,通常您希望将 overflow-y
设置为 scroll
。以防菜单超出屏幕底部。
关于javascript - 滚动固定标题不显示在移动设备上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54648507/