修复滚动条抖动后的div

Question

我正在尝试创建一个简单的jQuery函数，当窗口向下滚动超过某个点时，该函数会使导航栏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代码: body {空白区: 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'
        })
    }
})

谢谢你的帮忙!

Answer 1

​

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

*{
  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>

​

以下是代码片段中的工作演示