菜单导航栏 |立场问题

Question

我的导航栏设计有 2 个问题。

• 首先，导航栏保持在顶部，即使我向下滚动。我认为这是由于我给了<nav> 的绝对位置。
• 最后但并非最不重要的一点是，当我推出菜单时（我的窗口高度很短，就像智能​​手机处于横向模式一样），然后我向下滚动，没有更多的背景颜色。我知道这是由于“身高：100%；” （CSS 文档的第 137 行）。但是当我删除“height: 100%;”时，我没有“height: 100%;”的过渡。宣言。如何解决这个问题？

非常感谢！

jQuery(document).ready(function(){
    jQuery('#nav-burger').click(function() {
       jQuery('.list-shown, .list-hidden').each(function() {
          jQuery(this).toggleClass('list-shown').toggleClass('list-hidden');
       });
    });
});

@import url(https://fonts.googleapis.com/css?family=Raleway:400,300,200,100,500,600,700,800,900);
@import url(http://fonts.googleapis.com/css?family=Titillium+Web);

@viewport { /* peu supporté / ne remplace pas encore la balise <meta> */
   width: device-width; /* largeur du viewport */
   zoom: 1; /* zoom initial à 1.0 */
}

*, *::before, *::after {
    box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    text-rendering: optimizelegibility;
}

img {
    width: 100%;
}

nav {
    margin:0;
    background: rgba(0,0,0,0.7);
    font-family:"Titillium Web", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
    font-weight: 600;
}

#navigationgenerale {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 10;
}

#navigationgenerale li {
    list-style: none;
}

#navigationgenerale .nav-content {
    margin:0 auto;
    max-width: 1000px;
}

#navigationgenerale .nav-content ul {
    margin: 0;
    padding: .5em 0px;
    line-height: 30px;
    width: auto;
    text-align: justify;
    display: flex;
}
#navigationgenerale .nav-content .nav-header {
    display: none;
}

#navigationgenerale .nav-content .nav-item {
    display: inline-block;
    position: relative;
    height: 30px;
    vertical-align: middle;
}
#navigationgenerale .nav-content .nav-item a {
    text-decoration: none;
    font-size: 22px;
}
#navigationgenerale.list-hidden .nav-content .nav-item a {
    color: #ececec;
}
#navigationgenerale.list-shown .nav-content .nav-item a {
    color: #191919;
}

#navigationgenerale .nav-content .nav-header {
    justify-content: space-between;
}
#navigationgenerale .nav-content .nav-list {
    justify-content: space-around;
}

#navigationgenerale.list-shown .nav-content ul.nav-list {
    display: block;
    padding: 5% 10%;
}
#navigationgenerale.list-shown .nav-content .nav-list li {
    display: list-item;
    border-bottom: #555 1px dotted;
    padding: 15px 5px;
    height: auto; /* important */
}

#navigationgenerale .nav-content .icon a {
    display: inline-block;
    overflow: hidden;
    text-indent: 160%;
    white-space: nowrap;
}
#navigationgenerale.list-hidden .nav-content .icon.nav-accueil a {
    background: url("//alexandredomain.ovh/beta/sprite.svg#logo-ececec") 50% 50% no-repeat;
    background-size: 50px;
    transition: background 0.5s 0s ease-in;
}
#navigationgenerale.list-shown .nav-content .icon.nav-accueil a {
    background: url("//alexandredomain.ovh/beta/sprite.svg#logo-191919") 50% 50% no-repeat;
    background-size: 50px;
}
#navigationgenerale .nav-content .icon.nav-contact a {
    background: url("//alexandredomain.ovh/beta/sprite.svg#letter-ececec") 50% 50% no-repeat;
    background-size: 35px;
    width: 50px;
    height: auto;
}

@media screen and (max-width: 1760px) {
    #navigationgenerale .nav-content ul.nav-header {
        display: flex;
    }
    #navigationgenerale .nav-content .nav-list li.nav-accueil {
        display: none;
    }
    #navigationgenerale.list-hidden .nav-content .nav-list {
        display: none;
    }
    #navigationgenerale.list-shown {
        background-color: #ececec;
        transition: height 1s 1s ease-in-out, background-color .5s .5s linear;
        color: #191919;
        overflow-y: visible;
        height: 100%;
    }
    #navigationgenerale.list-hidden {
        height: 66px;
        transition: height 1s 0s ease-in-out, background-color .5s 0s linear;
    }
    #navigationgenerale.list-shown .nav-content .nav-header .nav-contact a {
        transform: translateY(-200%) translateX(200%) ;
        transition: transform 0.5s .5s ease-in-out;
    }

    #navigationgenerale.list-shown .nav-content .nav-list ul  {
        display: block !important;
    }
    #navigationgenerale .nav-content ul {
        margin: 10px 15px;
    }

}
.list-shown line.ligne-haut {
    stroke: #191919;
    transform: translateY(28px) rotate(-405deg);
    transform-origin: 50%;
  transition: all 0.5s 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}

.list-hidden line.ligne-haut {
    transform: translateY(0px) rotate(0deg);
    transform-origin: 50%;
  transition: all 0.5s 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}

.list-shown line.ligne-milieu {
  opacity: 0;
  transition: opacity 0.3s linear;
}

.list-hidden line.ligne-milieu {
  opacity: 1;
  transition: opacity 0.3s 0.5s linear;
}

.list-shown line.ligne-bas {
    stroke: #191919;
      transform: translateY(-28px) rotate(405deg);
    transform-origin: 50%;
  transition: all 0.5s 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}

.list-hidden line.ligne-bas {
    transform: translateY(0px) rotate(0deg);
    transform-origin: 50%;
  transition: all 0.5s 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <nav id="navigationgenerale" class="list-hidden" lang="fr-FR" aria-label="Navigation générale" role="navigation">
        <div class="nav-content">
            <ul class="nav-header">
                <li class="nav-item nav-menu">
                    <svg id="nav-burger" x="0px" y="0px" height="35px" width="35px" viewBox="0 0 96 96">
                        <line class="ligne-haut" x1="12" y1="20" x2="84" y2="20" stroke="#ececec" stroke-width="8" stroke-linecap="round"></line>
                        <line class="ligne-milieu" x1="12" y1="48" x2="84" y2="48" stroke="#ececec" stroke-width="8" stroke-linecap="round" stroke-opacity="1"></line>
                        <line class="ligne-bas" x1="12" y1="76" x2="84" y2="76" stroke="#ececec" stroke-width="8" stroke-linecap="round"></line>
                    </svg>
                </li>
                <li class="nav-item nav-accueil icon"><a href="/" title="Accueil">Accueil</a></li>
                <li class="nav-item nav-contact icon"><a href="/contact.html">Contact</a></li>
            </ul>
            <ul class="nav-list">
                <li class="nav-item nav-accueil icon"><a href="/" title="Accueil">Accueil</a></li>
                <li class="nav-item nav-parcours"><a href="/parcours.html">Parcours</a></li>
                <li class="nav-item nav-experience"><a href="/experience.html">Expérience</a></li>
                <li class="nav-item nav-projet"><a href="/projet.html">Projet</a></li>
                <li class="nav-item nav-loisirs"><a href="loisirs.html">Loisirs</a></li>
                <li class="nav-item nav-contact"><a href="/contact.html">Contact</a></li>
            </ul>
        </div>
    </nav>
    <div style="margin-top: 450px; font-family: Raleway; font-weight: 500; font-size: 60px;"> Test </div>
</body>

Answer 1

对于您的 1. 问题： 将postion:absolute 更改为postion:relative #navigationgenerale 块。

1. 问题： 而不是高度 100% 将其更改为特定值，例如 460 像素。