javascript - 菜单打开时的移动视图问题?
问题描述
打开菜单并向下滚动导航栏时仍然移动
我想在打开菜单时阻止滚动
我为响应式导航栏实现了以下代码,但我仅在移动视图上遇到问题
$(document).ready(function(){
$(".menu").click(function(){
$("nav").slideToggle(800);
})
$(window).scroll(function() {
var distanceFromTop = $(document).scrollTop();
if (distanceFromTop >= $('.banner').height())
{
$('nav').addClass('fixed');
}
else
{
$('nav').removeClass('fixed');
}
});
});
body{
height:1000px;
}
.banner{
height: 120px;
background: red;
}
.fixed {
position: fixed;
top: 0;
width: 100%;
}
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){
.banner{
display: none;
position: fixed;
}
nav{
display: none;
padding: 0;
}
.responsive-bar{
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>
<div class="banner">centered image
</div>
<nav>
<h1 id="full-logo"><a href="#">MyCar</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>
请在这个问题上提供任何帮助
注意:我在移动视图上隐藏导航栏上方的横幅,但在大屏幕视图上未隐藏
解决方案
菜单打开时将“溢出:隐藏”添加到正文。它会解决你的问题。
$(document).ready(function(){
$(".menu").click(function(){
$("nav").slideToggle(800);
})
$(window).scroll(function() {
var distanceFromTop = $(document).scrollTop();
if (distanceFromTop >= $('.banner').height())
{
$('nav').addClass('fixed');
$('body').css('overflow', 'hidden');
}
else
{
$('nav').removeClass('fixed');
$('body').css('overflow', 'auto')
}
});
});
body{
height:1000px;
}
.banner{
height: 120px;
background: red;
}
.fixed {
position: fixed;
top: 0;
left:0;
/* bottom:0;
overflow:auto; */ /* if you want scroll inside menu */
width: 100%;
}
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){
.banner{
display: none;
position: fixed;
}
nav{
display: none;
padding: 0;
}
.responsive-bar{
display: block;
position: fixed;
top:0;
left:0;
}
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>
<div class="banner">centered image
</div>
<nav>
<h1 id="full-logo"><a href="#">MyCar</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>
推荐阅读
- ruby-on-rails - 如何使用 devise gem 停止 Rails 应用程序中的 url 操作?
- apache-spark - SparkSession 连接到 Databricks Azure
- node.js - 节点,快递,猫鼬不一起工作
- azure - 是否可以在 Azure Databricks 中使用 Tensorboard 分析 Tensorflow?
- reproducible-research - 如何创建可执行的研究纲要 (erc)?
- android - Android:使用 SSL 碰撞连接到 Squid 代理不起作用
- powershell - 验证用户是否存在于 Octopus Deploy 中
- c - 为什么 CommandLineToArgvW 以不同的方式处理它的第一个参数?
- python - Pandas 数据框分组和计数与 Python 中的验证
- oracle - Oracle 时间戳和间隔