スクロール後のdivの修正スクロールバージッタの作成

ウィンドウが一定のポイントを超えてスクロールするたびにnavbar divを固定する単純なjQuery関数を作成しようとしています。このdivをスクロールしてNavbarを修正する必要があるたびに、この点をヘッダーdivの高さとして設定しました。ウィンドウのスクロールバーをクリックしてドラッグし、divが固定される場所を右に置いた場合を除き、上下にジッタがかかります。これを引き起こす原因は何ですか？スクロール後のdivの修正スクロールバージッタの作成

これは私のHTMLコードです：

<!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>

は、これは私のCSSコードです：体 { マージン：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; 
}

そして、これは私のjQueryのコードです：あなたの助けのための

$(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' 
     }) 
    } 
})

ありがとう！ここ

出典

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>

あなたのための作業のデモは、スニペット

にコードの

出典

2017-04-11 10:01:00 Muzamil301

感謝です。私は自分自身のコードをこのコードと比較しました。私自身のコードがどこに間違っているのか分かりません。アイデアはありますか？ –

私は親愛なることを確認させてください – Muzamil301

スクロール後のdivの修正スクロールバージッタの作成

答えて

関連する問題