调整浏览器宽度时的导航栏响应问题？答案

【问题标题】：navbar responsive issue when resize the browser width?调整浏览器宽度时的导航栏响应问题？
【发布时间】：2018-04-27 10:02:28
【问题描述】：

我有一个响应式导航栏的问题，当我为移动视图调整浏览器的大小并打开然后关闭菜单按钮时，让浏览器全屏显示大屏幕视图，导航栏将消失对该问题的任何帮助

我需要添加另一个功能来在向下滚动时修复导航栏，但是在移动设备上滚动时菜单看起来很乱

在我的代码下方（在 sn-p 上）

$(document).ready(function(){
    $(".menu").click(function(){
        $("nav").slideToggle(800);
    })
});

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 (max-width:768px){
    nav{ 
        display: none;
        padding: 0;
    }
    .responsive-bar{
        display: block;
    }
    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="#">MyCar</a></h1>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</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>

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

根据您的 html 结构，您必须将以下代码添加到您的 css 中

@media (min-width:768px){
    nav{
        display: block !important;
    }
}

使用它，您不必对 html 和 css 进行任何更改。

$(document).ready(function(){
    $(".menu").click(function(){
        $("nav").slideToggle(800);
    })
});

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 (max-width:768px){
    nav{ 
        display: none;
        padding: 0;
    }
    .responsive-bar{
        display: block;
    }
    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;
    }
}
@media (min-width:768px){
	nav{
	    display: block !important;
	}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<nav>
    <h1 id="full-logo"><a href="#">MyCar</a></h1>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</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>

【讨论】：

@Mab，如果它对您有用，请接受并投票赞成我的回答，以便对其他人也有用。
请问我想在导航栏上方添加图片，然后向下滚动，导航栏粘在顶部，如何实现
@Mab，你也想在手机上实现同样的效果吗？
@mab，这里我给你一个链接，请检查一下。如果仍然对您没有帮助，请告诉我。codepen.io/JGallardo/pen/lJoyk
但在移动视图上，我不需要导航栏上方的图像，当我打开菜单时它搞砸了

【解决方案2】：

您还需要在调整窗口大小时更新导航。好心检查。希望这对您有所帮助。刚刚在 jquery 中进行了更新。

$(document).ready(function(){
    $(".menu").click(function(){
        $("nav").slideToggle(800);
    });
    
    $( window ).resize(function() {
    
      if($(window).width() > 767) {
        $("nav").slideDown(800);
      }
    });
});

nav{
    width: 100%;
    background: #202c45;
    padding: 0 50px;
    box-sizing: border-box;
    display: block
}
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 (max-width:768px){
    nav{ 
        display: none;
        padding: 0;
    }
    .responsive-bar{
        display: block;
    }
    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="#">MyCar</a></h1>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</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>

【讨论】：

桌面上是向下滑动的nav，没必要。
@Bhoomi 也不需要申请!important。因为它会导致覆盖，我们应该始终避免它:-)
这里 display none 是内联添加的，所以需要添加 !important 来覆盖 display none。有时我们必须使用 !important 来避免此类问题。
@Bhoomi 那是因为 jquery。如果它是在 HTML 中内联添加的，那么即使在桌面视图中它也不应该是可见的。
@AnmolSandal 和 Bhoomi ，您可以在 jquery 中使用 Slidedown 或 css attr 显示块，两者都很好，但是在 css 中制作显示块 !important 并不可取。因为 css 的基本规则是不要使用 !important。

【解决方案3】：

请检查以下代码行以在导航上方添加图像并使标题保持粘性。

脚本

$(document).ready(function(){
    $(".menu").click(function(){
        $("nav").slideToggle(800);
        $("nav").toggleClass("fixed_nav");
        $(".responsive-bar").toggleClass("addtop");
    });
}); 


$(window).scroll(function(){
    if($(window).width() > 767) {
        if ($(window).scrollTop() >= 150) {
            $('nav').addClass('fixed-header');
        }
        else {
            $('nav').removeClass('fixed-header');
        }
    }
    else {
        if ($(window).scrollTop() >= 150) {
            $('.responsive-bar').addClass('fixed-header');
        }
        else {
            $('.responsive-bar').removeClass('fixed-header');
        }
    }
});

HTML

<div class="img-wrapper">
    <img src="https://via.placeholder.com/1250x150">
</div>
<nav class="nav-bar">
    <h1 id="full-logo"><a href="#">MyCar</a></h1>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</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>

......

CSS

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 (max-width:768px){
    nav{
        display: none;
        padding: 0;
    }
    .responsive-bar{
        display: block;
    }
    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;
    }
    img {
        display: none;
    }
    .nav-bar.fixed_nav{
        display: none;
        position: fixed;
        width: 100%;
        left: 0px;
        right: 0px;
        top: 0px;
    }
    .fixed-header.addtop {
        top: 98px;
    }
}
@media (min-width:768px){
    nav{
        display: block !important;
    }
}
.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}

.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

【讨论】：