缩小和固定的导航栏间隙

Question

I've got a header composed of a small navbar and of a big one, which is the main one.

To the main one, I've did it so that it sticks to the page and it shrinks while scrolling, but for a second it goes like this — I don't know how to explain it: https://imgur.com/a/NcfyC

The second picture is the default, when it is not scrolled, and the first picture is when a gap appears for a second, but after that goes back to normal. I really don't get why this happens.

Here's how I did it:

 $(window).scroll(function() { if ($(this).scrollTop() > 50) { $('#top-mare-wrap').addClass("shrink"); } else { $('#top-mare-wrap').removeClass("shrink"); } }); 

 #top-mare-wrap.shrink { top: 0; margin: 0; padding: 0; } #top-mare-wrap.shrink ul { margin-left: auto; margin-right: auto; } #top-mare-wrap.shrink li { margin-left: auto; margin-right: auto; } #top-mare-wrap.shrink img { position: relative; left: 7vw; width: 6vw; } #top-mare-wrap.shrink a { margin: 0; padding: 0; left: 20vw; top: 0.8vw; } #top-mare-wrap.shrink a:hover:after { width: 100%; color: #F28A00; } #top-mare-wrap { position: fixed; width: 100%; background: #fff; border-bottom: 0.2vw solid orange; transition: all .5s ease-in-out; z-index: 100; } #top-mare { padding: 0; margin: 0; padding-bottom: 1.55vw; } #top-mare ul { list-style-type: none; margin: 0; padding: 0; } #top-mare li { display: inline; padding-left: 4vw; } #top-mare a { position: relative; } #top-mare a:after { content: ''; position: absolute; bottom: 0; left: 0; width: 0%; border-bottom: 2px solid #F28A00; transition: 0.4s ease; } #top-mare a:hover:after { width: 74%; color: #F28A00; } #top-mare a:hover { color: #F28A00; } #top-mare li a { margin-top: 1.3vw; margin-left: 3.083vw; padding-right: 1.041vw; display: inline-block; text-decoration: none; color: #ADADAD; text-align: center; font-size: 1vw; font-weight: normal; } .slideshow-container { clear: both; max-width: 100%; position: relative; margin: auto; overflow: hidden; z-index: 10; } .rslides { position: relative; list-style: none; overflow: hidden; width: 100%; padding: 0; margin: 0; } .rslides li { -webkit-backface-visibility: hidden; position: relative; display: none; width: 100%; left: 0; top: 0; } .rslides li:first-child { position: relative; display: block; float: left; } .rslides img { display: block; height: auto; float: left; width: 100%; border: 0; } 

 <header id="top"> <nav id="top-mic"> <ul> <li class="dreapta"><a href="#">Contact</a></li> <li class="dreapta"><a href="#">Despre noi</a></li> <li class="dreapta"><a href="#">Locatie</a></li> <li class="stanga"><img src="img/phone.jpg" class="phone" />074 44 44 444</li> <li class="stanga mail-text"><img src="img/mail.jpg" class="mail" />bestdavnic73@gmail.com</li> <li class="stanga"> <a href="http://facebook.com" target="_blank"><img src="img/facebook.jpg" class="fb" /></a> </li> </ul> </nav> <div id="top-mare-wrap"> <a href="#"><img src="img/logo.jpg" alt="davnic" class="logo"></img> </a> <nav id="top-mare"> <ul> <li><a href="#">Acasa</a></li> <li><a href="#">Buton1</a></li> <li><a href="#">Buton2</a></li> <li><a href="#">Buton3</a></li> <li><a href="#">Buton4</a></li> </ul> </nav> </div> </header> </div> <div class="slideshow-container"> <ul class="rslides"> <li><img src="img/img1.jpg" alt=""></li> <li><img src="img/img2.jpg" alt=""></li> <li><img src="img/img3.jpg" alt=""></li> </ul> <script src="js/sshow.js"></script> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 1

Oh I solved it by myself - I had to position the pic from the slideshow in another way. Added top: 4.16vw, now works fine.