スクロールジャンプの具体化

Question

したがって、navbar要素でスクロール機能を使用すると、スクロールに関する奇妙な問題が発生します。

ページをスクロールすると、固定ピンのナビバーが一番上にくると、ページ上のコンテンツが突然上に飛びます。

Here's a codepen to illustrate what I mean

誰かが私が間違ってやっているを指すことができれば、私は非常に感謝されます。

---

画鋲の私の初期化：

$('#navbar').pushpin({ 
    top: $('#wrapper').offset().top 
}); 

一般的なHTMLの構造：

<div class="intro"> 
    ... 
</div> 
<div id="wrapper"> 
    <nav id="navbar"> 
     ... 
    </nav> 
    <div class="content"> 
     ... 
    </div> 
</div> 

Answer 1

場合には、それはここで誰もが解決策だ役立ちます

とのdivにナビゲーションバーをラップnavbarに等しい固定高さpushpinがnavbarをfixedからfixedに変更すると、これはドキュメント内のスペースを取る方法を変更します。設定された高さのラッパーdivは、ナビゲーションバーの配置に関係なくそのスペースを節約します。

HTML

<div id="wrapper"> 
    <nav id="navbar"> 
     ... 
    </nav> 
</div> 

JS

$('#navbar').pushpin({ 
    top: $('#navbar').offset().top 
}); 

CSS

#wrapper { 
    //height equal to height of navbar 
    height: 64px; 
}