Menu navigation bar | position issue - html

Question

I have 2 problems with my navbar design.
First, the navbar stays at the top, even if I scroll down. I think it's due to the absolute position I gave to the <nav>.
Last but not least, when I roll out the menu (the height of my windows is short, like with a smartphone in landscape mode) and then I scroll down, there is no more background-color. I know this is due to "height: 100%;" (line 137 of CSS doc). But when I remove "height: 100%;", I haven't the transition that I had with "height: 100%;" declaration. How to resolve this issue?
Thanks a lot!
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">Accueil</li>
<li class="nav-item nav-contact icon">Contact</li>
</ul>
<ul class="nav-list">
<li class="nav-item nav-accueil icon">Accueil</li>
<li class="nav-item nav-parcours">Parcours</li>
<li class="nav-item nav-experience">Expérience</li>
<li class="nav-item nav-projet">Projet</li>
<li class="nav-item nav-loisirs">Loisirs</li>
<li class="nav-item nav-contact">Contact</li>
</ul>
</div>
</nav>
<div style="margin-top: 450px; font-family: Raleway; font-weight: 500; font-size: 60px;"> Test </div>
</body>

Answer 1

To your 1. question:
Change the postion:absolute to postion:relative #navigationgenerale block.
question:
Instead of height 100% change it to an specific value like 460px.