Fix div nach scroll macht scrollbar jitter

Ich versuche eine einfache jQuery-Funktion zu machen, die ein navbar-div festlegt, wenn das Fenster nach einem bestimmten Punkt gescrollt wird. Ich habe diesen Punkt als Höhe meines Header-Div gesetzt, da es immer dann ist, wenn man an diesem Div vorbeiscrollt, dass die Navbar fixiert wird. Es funktioniert gut, es sei denn, ich klicke und ziehe die Fensterlaufleiste und positioniere sie genau dort, wo das Div fixiert werden soll, es wackelt auf und ab. Was könnte das verursachen?Fix div nach scroll macht scrollbar jitter

Das ist mein HTML-Code:

<!DOCTYPE html> 
<html> 
    <head> 
     <link rel='stylesheet' type='text/css' href='css/styles.css'> 
     <script src='js/jquery.js'></script> 
     <script src='js/main.js'></script> 
    </head> 

    <body> 
     <div class='header'></div> 
     <div class='navbar'></div> 
     <div class='about'></div> 
    </body> 

</html>

Das ist mein CSS-Code ist: Körper { margin: 0; }

.header 
{ 
    margin: 0; 
    height: 100vh; 
    background-color: yellow; 
} 

.navbar 
{ 
    margin: 0; 
    height: 10vh; 
    width: 100%; 
    background-color: pink; 
} 

.about 
{ 
    margin: 0; 
    height: 200vh; 
    background-color: red; 
}

Und das ist mein jQuery-Code:

$(window).scroll(function(e){ 
    if ($(this).scrollTop() >= $('.header').height() && $('.navbar').css('position') != 'fixed') 
    { 
     $('.navbar').css('background-color', 'blue'); 
     $('.navbar').css({ 
      'position': 'fixed', 
      'top': '0' 
     }); 
    } 
    else if ($(this).scrollTop() < $('.header').height() && $('.navbar').css('position') != 'relative') 
    { 
     $('.navbar').css('background-color', 'pink'); 
     $('.navbar').css({ 
      'position': 'relative' 
     }) 
    } 
})

Vielen Dank für Ihre Hilfe!

Quelle

2017-04-11 Tor Brandt

$(window).scroll(function() { 
 
\t  if ($(window).scrollTop() > 30){ 
 
\t   $('nav').addClass('sticky'); 
 
\t  } 
 
\t  else if ($(window).scrollTop() < 30){ 
 
\t   $('nav').removeClass('sticky'); 
 
\t  } 
 
\t });

*{ 
 
    box-sizing: border-box; 
 
    padding:0; 
 
    margin:0; 
 
} 
 
body{ 
 
    min-height: 800px; 
 
} 
 
.wrapper{ 
 
    min-height: 50px; 
 
    margin-top:30px; 
 
    
 
} 
 
nav{ 
 
     background-color: #f1f1f1; 
 
     color: #000; 
 
     padding: 15px; 
 
     transition: all .3s; 
 
     height: 50px; 
 
    } 
 
    
 
nav ul li{ 
 
     display:inline; 
 
     } 
 
     nav ul li a{ 
 
     padding: 8px; 
 
     } 
 
    .sticky{ 
 
     width: 100%; 
 
     top: 0; 
 
     left:0; 
 
     position:fixed; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
<nav> 
 
    <ul class="nav"> 
 
     <li class="nav-item"> 
 
      <a class="nav-link" href="#">Link</a> 
 
     </li> 
 
     <li class="nav-item"> 
 
      <a class="nav-link" href="#">Link</a> 
 
     </li> 
 
     <li class="nav-item"> 
 
      <a class="nav-link" href="#">Link</a> 
 
     </li> 
 
     <li class="nav-item"> 
 
      <a class="nav-link disabled" href="#">Disabled</a> 
 
     </li> 
 
    </ul> 
 
</nav> 
 
</div>

hier ist die Arbeits Demo für Sie im Code-Schnipsel

Quelle

2017-04-11 10:01:00 Muzamil301

Danke für den Code. Ich habe meinen eigenen Code mit diesem verglichen, und ich kann nicht herausfinden, wo mein eigener Code falsch läuft. Haben sie eine Idee? –

lassen Sie mich überprüfen, lieber – Muzamil301

Fix div nach scroll macht scrollbar jitter

Antwort

Verwandte Themen