JSスティッキーヘッダーグリッチの修正

Question

これにはいくつかの記事がありますが、私が経験している不具合に対処する回答が1つありますが、この修正はセットアップでは機能しません。 （Existing Post 1） （Existing Post 2）

-

私は、ブラウザのウィンドウときに、ユーザーがスクロールして、過去の一番上に付着するdiv要素を作成するために、いくつかのJSを使用しました。この設定は、ユーザーが親要素をスクロールするときに、既存の親コンテナ#stickywrapperaaにクラス.stickyを適用することによって機能します。ここでJSは次のとおりです。

<script> 
jQuery(document).ready(function($) { 
    // Cache selectors outside callback for performance. 
    var $window = $(window), 
     $stickyEl = $('#stickywrapperaa'), 
     elTop = $stickyEl.offset().top; 

    $window.scroll(function() { 
     $stickyEl.toggleClass('sticky', $window.scrollTop() > elTop); 
    }); 
}); 
</script> 

これは、私は、CSSを使用して配置し、スタイリングしている#stickywrapperaa.stickyの要素ID /クラス属性を作成します。 これまでのところ、これまでの作業はすべてです。

---

問題：私は

問題がスティッキーヘッダが活性化されたときは、このページの高さの部分を除去し、同じ高さまでジャンプする静的ページのコンテンツを引き起こすことです親コンテナ（#stickywrapperaa）。

論理的には、コンテナが静的ページコンテンツの上に移動されているため、これは完璧な意味を持ちます。しかし、これで私のページには穴をあける必要があります。

親コンテナ（#stickywrapperaa）と同じ高さの空きスペースを作成し、それをスティッキークラスで表示するように考えました。

誰でも私がこれを達成するのに役立ちますか、よりよい解決策を提供できますか？

Answer 1

スティッキークラスを切り替えるときに、パディングトップをボディに追加します。パディングはヘッダーと同じ高さにする必要があります。

<script> 
jQuery(document).ready(function($) { 
    // Cache selectors outside callback for performance. 
    var $window = $(window), 
     $stickyEl = $('#stickywrapperaa'), 
     elTop = $stickyEl.offset().top; 

    $window.scroll(function() { 
     $stickyEl.toggleClass('sticky', $window.scrollTop() > elTop); 
     if ($window.scrollTop() > elTop){ 
      $("body").css("padding-top", $stickyEl.height()); 
     } else { 
      $("body").css("padding-top", 0); 
     } 
    }); 
}); 
</script> 

Answer 2

絶対に削除されるdivの位置を設定し、relativeに設定され、絶対divと同じ高さを持つ目に見えない別のdivを作成します。

divで高さを後で追加すると機能する場合がありますが、最初に配置するだけでは複雑すぎ、通常のフローから目に見えるdivを削除します。