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代码：身体 { 保证金：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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

这是您在片段中的工作演示

滚动后修复div使滚动条抖动

1 个答案: