修复滚动后的div使滚动条抖动答案

【问题标题】：Fix div after scroll makes scrollbar jitter修复滚动后的div使滚动条抖动
【发布时间】：2017-04-11 09:10:45
【问题描述】：

我正在尝试制作一个简单的 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 代码：身体 { 边距：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'
        })
    }
})

感谢您的帮助！

【问题讨论】：

标签： jquery html scroll

【解决方案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>

这里是 sn-p 中的工作演示

【讨论】：

感谢您的代码。我已经将我自己的代码与这个代码进行了比较，但我无法弄清楚我自己的代码哪里出错了。你有什么想法吗？
让我检查一下亲爱的