javascript - スクロール時に Div が固定 div より遅れる

Question

プロパティ position:fixed に問題があります。私の jfiddleをチェックすると、スクロールして黒いdivが一番上に来ると、JSを介してスタイル「スティック」が追加され、意図したとおりに位置が固定されます。残念ながら、これを行うと、div が固定スタイルになると、黒いバーの下の div が少し跳ね上がり、アイデアが台無しになります。

あなたが見なければならないと思う主なCSSは次のとおりです。

.orangeContent {
max-width:960px;
width:100%;
margin:0px auto;
padding:40px 0px 0px 0px;}

    header {
max-width:1920px;
width:100%;
margin:0px auto;
padding:0px;
background:#ffffff;

.stick {
position:fixed;
top:0px;
box-shadow:0px 4px 2px -2px #b32f01 ;
transition-duration:0.2s;}

そしてもちろん Javascript:

    $(document).ready(function() {
    var s = $("header");
    var pos = s.position();                    
    $(window).scroll(function() {
        var windowpos = $(window).scrollTop();

        if (windowpos >= pos.top) {
            s.addClass("stick");
        } else {
            s.removeClass("stick"); 
        }
    });
});

それで、基本的に、これを修正する方法について何か考えはありますか？

前もって感謝します。