粘性导航与第一个滚动（固定位置）进行奇怪的跳跃

Question

当我加载页面并向下滚动一点时，我的粘性导航栏会出现这种奇怪的跳跃。这只发生在第一次滚动时，之后它会正常运行，直到我重新加载页面并再次向下滚动。这可能与我向下滚动以使导航保持粘性时获得的固定位置有关。无论如何，这是我的代码：

/*image resize top nav */

$(document).on("scroll",function(){
    if($(document).scrollTop()>100){
        $("header").removeClass("large").addClass("small");
    } else{
        $("header").removeClass("small").addClass("large");
    }
});

/*-----*/





/*nav */

jQuery(document).ready(function() {

    var navOffset = jQuery("nav").offset().top;

    jQuery("nav").wrap('<div class="nav-placeholder"></div>');
    jQuery(".nav-placeholder").height(jQuery("nav").outerHeight());

    jQuery(window).scroll(function(){
        var scrollPos = jQuery (window).scrollTop();

        if (scrollPos >= navOffset) {
        jQuery("nav").addClass("fixed");
        } else {
        jQuery("nav").removeClass("fixed");

        }

    });                 
});

body {
    background-color: grey;
}

nav {
    z-index: 500;
    background-color: #fff;
}

.nav-placeholder {
    margin: 0 0 40px 0;
}

.fixed {
    position: fixed;
    top: 0;
    width: 100%;
}


.navigation-bar-top {
    background-color: #FFF;
    width: 100%;
    color: #0E8DBD;
    color: white;
}

.navigation-bar-top img {
    margin-top: 25px;
}


.navigation-bar-top {
    text-align: center;
}


.navigation-bar-top ul {
    background-color: #FFF;
    width: 100%;
    color: #0E8DBD;
    list-style: none;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 30px;
}

.navigation-bar-top li {
    display: inline-block;
    padding: 0 20px 0 20px;
    font-size: 20px;
}

.navigation-bar-top a {
    text-decoration: none;
    color: #0E8DBD;
} 


header,nav, img, li{
    transition: all 1s;
    -moz-transition: all 0.5s; 
    -webkit-transition: all 0.5s; 
}

header.large{
    height: 0px;
}
header.large img { 
    width: 8%; height: 10%;
}

header.small { 
    height: 50px; 
}
header.small img{ 
    width: 8%; height: 6%; margin-top: -10px; 
}

.placeholder {
    min-height: 6000px;
    background: grey;
    color: red;
}

img {
    height: 8%;
    width: 10%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<nav>
    <br>
    <header class=“large”>
        <div class="navigation-bar-top"><img class="logo" src="https://www.jobboardfinder.net/upload/1c7f578db0e8d9673c95dd5b1c7122c5a36081b0/logo_jobboard.png">
        <ul>
            <li><a href="#">placeholder </li></a>
            <li><a href="#">placeholder</li></a>
            <li><a href="#">placeholder</li></a>
            <li><a href="#">placeholder</li></a>
            <li><a href="#">placeholder</li></a>
            <li><a href="#">placeholder</li></a>
        </ul>
    </div>
</nav>
<div class="placeholder">row1 <br>
        row2<br>
        row3<br>
        row4<br>
        row5<br>

</div>

感谢您抽出宝贵时间。

Answer 1

将fixed 类添加到 html 中的导航。

https://jsfiddle.net/9zk18nch/

Answer 2

这是因为 body 元素有一个默认边距，一旦您将导航切换到 fixed，它就会被忽略。 我假设您希望导航在整个屏幕宽度上伸展，因此在 body&html 标记上设置 margin: 0 和 padding: 0。

/*image resize top nav */

$(document).on("scroll",function(){
    if($(document).scrollTop()>100){
        $("header").removeClass("large").addClass("small");
    } else{
        $("header").removeClass("small").addClass("large");
    }
});

/*-----*/





/*nav */

jQuery(document).ready(function() {

    var navOffset = jQuery("nav").offset().top;

    jQuery("nav").wrap('<div class="nav-placeholder"></div>');
    jQuery(".nav-placeholder").height(jQuery("nav").outerHeight());

    jQuery(window).scroll(function(){
        var scrollPos = jQuery (window).scrollTop();

        if (scrollPos >= navOffset) {
        jQuery("nav").addClass("fixed");
        } else {
        jQuery("nav").removeClass("fixed");

        }

    });                 
});

body, html {
    background-color: grey;
    padding: 0;
    margin: 0;
}

nav {
    z-index: 500;
    background-color: #fff;
}

.nav-placeholder {
    margin: 0 0 40px 0;
}

.fixed {
    position: fixed;
    top: 0;
    width: 100%;
}


.navigation-bar-top {
    background-color: #FFF;
    width: 100%;
    color: #0E8DBD;
    color: white;
}

.navigation-bar-top img {
    margin-top: 25px;
}


.navigation-bar-top {
    text-align: center;
}


.navigation-bar-top ul {
    background-color: #FFF;
    width: 100%;
    color: #0E8DBD;
    list-style: none;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 30px;
}

.navigation-bar-top li {
    display: inline-block;
    padding: 0 20px 0 20px;
    font-size: 20px;
}

.navigation-bar-top a {
    text-decoration: none;
    color: #0E8DBD;
} 


header,nav, img, li{
    transition: all 1s;
    -moz-transition: all 0.5s; 
    -webkit-transition: all 0.5s; 
}

header.large{
    height: 0px;
}
header.large img { 
    width: 8%; height: 10%;
}

header.small { 
    height: 50px; 
}
header.small img{ 
    width: 8%; height: 6%; margin-top: -10px; 
}

.placeholder {
    min-height: 6000px;
    background: grey;
    color: red;
}

img {
    height: 8%;
    width: 10%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<nav>
    <br>
    <header class=“large”>
        <div class="navigation-bar-top"><img class="logo" src="https://www.jobboardfinder.net/upload/1c7f578db0e8d9673c95dd5b1c7122c5a36081b0/logo_jobboard.png">
        <ul>
            <li><a href="#">placeholder </li></a>
            <li><a href="#">placeholder</li></a>
            <li><a href="#">placeholder</li></a>
            <li><a href="#">placeholder</li></a>
            <li><a href="#">placeholder</li></a>
            <li><a href="#">placeholder</li></a>
        </ul>
    </div>
</nav>
<div class="placeholder">row1 <br>
        row2<br>
        row3<br>
        row4<br>
        row5<br>

</div>