javascript - 移动视图菜单问题?
问题描述
我实现了下面的代码,当单击移动设备上的菜单按钮未显示菜单时,我在移动视图上遇到了问题,但是如果我没有向下滚动菜单有效,我该如何在移动视图上解决此问题
$(document).ready(function(){
$(".menu").click(function(){
$("nav").slideToggle(800);
$("body").toggleClass("hidden");
})
$(window).scroll(function() {
var distanceFromTop = $(document).scrollTop();
if (distanceFromTop >= $('.centered-logo').height())
{
$('nav').addClass('fixed');
}
else
{
$('nav').removeClass('fixed');
}
});
})
body{height: 3000px;
margin: 0;
padding: 0;
font-family: monospace;
}
.fixed {
position: fixed;
top: 0;
width: 100%;
}
.hidden{
overflow: hidden;
}
nav{
width: 100%;
background: #202c45;
padding: 0 50px;
box-sizing: border-box;
}
nav h1{
margin: 0;
padding: 0;
float: left;
padding-top: 18px;
}
nav h1 a{
color: #fff;
text-decoration: none;
}
nav ul{
margin: 0;
padding: 0;
float: right;
}
nav ul li{
list-style: none;
display: inline-block;
padding: 20px;
transition: 0.5s;
}
nav ul li:hover{
background: #f2184f;
}
nav ul li a{
color: #fff;
text-decoration: none;
}
.responsive-bar{
width: 100%;
background: #202c45;
padding: 10px 30px;
box-sizing: border-box;
display: none;
}
.responsive-bar h3{
margin: 0;
padding: 3px 0;
float: left;
color:#fff;
}
.responsive-bar h3 a{
color:#fff;
text-decoration: none;
}
.responsive-bar h4{
margin: 0;
padding: 0;
color: #fff;
float: right;
cursor: pointer;
padding: 5px 10px;
background:#f2184f;
text-transform: uppercase;
}
@media (min-width:768px){
nav{
display: block !important;
}
}
@media (max-width:768px){
nav{
display: none;
padding: 0;
}
.responsive-bar{
top:0;
display: block;
position: fixed;
}
nav h1{
display: block;
float: none;
}
nav ul{
float: none;
}
nav ul li{
display: block;
text-align: center;
padding: 15px 20px;
border-bottom: 1px solid rgba(255,255,255,.1)
}
#full-logo{
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<nav>
<h1 id="full-logo"><a href="#">hola</a></h1>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div style="clear:both;"></div>
</nav>
<div class="responsive-bar">
<h3 class="brand"><a href="#">MyCar</a></h3>
<h4 class="menu">Menu</h4>
<div style="clear:both;"></div>
</div>
我在移动视图上遇到问题,向下滚动并单击菜单按钮时没有出现任何内容,但是当我在单击菜单时出现菜单项时,我需要的只是向下和向上滚动菜单出现时如何解决此问题
解决方案
问题是因为您设置overflow: hidden
了身体,而身体nav
是页面流的一部分。将nav
始终相对于其父级偏移。
overflow: hidden
这是一个禁用
的示例:http: //jsfiddle.net/u9L50243/(切换菜单然后滚动 - 您会注意到导航滚动进出视口)
除了. position: fixed
_.responsive-bar
例如:http: //jsfiddle.net/ebcvqds7/
推荐阅读
- python - Python:屏蔽电子邮件文本中的命名实体
- javascript - 如果尚未下载脚本,则跳过同步脚本执行
- reactjs - react-native:如何隐藏底部标签栏 onPress
- python - Python:单击图像后捕获 x,y 坐标并关闭图像
- android - Webview Xamarin Forms中的Websocket不起作用
- node.js - 使用 Mongoose 分组
- python - Pandas 将一系列值分配给特定位置的最有效方法
- android - Android 8 System App 更新仅在重启后生效
- mysql - 为什么并发的“删除...插入”语句会导致死锁?
- html - 一种形式的多个按钮