修復div後滾動使滾動條抖動

我想做一個簡單的jQuery函數，使窗口滾動向下滾動過某個點時導航欄div。我已經設置了這個點作爲我的頭div的高度，因爲它是每當你滾動這個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後滾動使滾動條抖動

回答

相關問題