菜单打开时的移动视图问题？

Posted 2023-05-09

【中文标题】菜单打开时的移动视图问题？

【英文标题】：mobile view issue when the menu opened?

【发布时间】：2018-10-11 11:10:27

【问题描述】：

当打开菜单并向下滚动导航栏时仍然移动

我想在打开菜单时防止滚动

我为响应式导航栏实现了以下代码，但我只在移动视图上遇到了问题

$(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>    

任何关于这个问题的帮助，请

注意：我在移动视图上隐藏导航栏上方的横幅，但在大屏幕视图上未隐藏

【参考方案1】：

在菜单打开时将“溢出：隐藏”添加到正文。它会解决你的问题。

$(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>