修复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后滚动使滚动条抖动

回答

相关问题