首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >移动视图菜单问题?

移动视图菜单问题?
EN

Stack Overflow用户
提问于 2018-06-10 02:04:47
回答 1查看 35关注 0票数 1

我实现了下面的代码,当我在手机上点击菜单按钮没有显示菜单时,我在手机视图上遇到了一个问题,但是如果我没有向下滚动菜单工作,我如何在手机视图上解决这个问题

代码语言: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');
        }
    });
    
})
代码语言:javascript
复制
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;
    }
}
代码语言:javascript
复制
<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>

我在移动视图上有一个问题,当向下滚动和单击菜单按钮时什么也没有出现,但当我在to时单击菜单将出现菜单项时,我所需要的就是当向下滚动和向上滚动菜单出现时,我如何解决此问题

EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50777143

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档