スクロール後のスティッキーナビゲーション

Question

私はナビゲーションバーを持っています。

z-index: 999; 
position: relative; 
background: #302f2f; /* Old browsers */ 
background: -moz-linear-gradient(top, #302f2f 0%, #000000 100%); 
background: -webkit-linear-gradient(top, #302f2f 0%,#000000 100%); 
background: linear-gradient(to bottom, #302f2f 0%,#000000 100%); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#302f2f', 
endColorstr='#000000',GradientType=0); /* IE6-9 */ 
box-shadow: 0px 7px 31px -5px #000; 
border-bottom: 15px solid #ff9500;s 

Anは、私が固定位置のためのJavascriptコードを使用します：私は、ナビゲーションバーをスクロールするとき

$(window).scroll(function() { 
if ($(window).scrollTop() > 1) { 
    $('#navigationsleiste').css('top', $(window).scrollTop()); 
} 
} 

は今のスペースを持っている私は、ナビゲーションのために、このCSSコードを使用 http://bit.do/bVXAs

ブラウザウィンドウの上部に移動します。しかし、私はそのスペース/ギャップが欲しくない。なぜ私はそのギャップ/スペースを持っている人を知っていますか？

Answer 1

代わりに$（ウィンドウ）を$（ドキュメント）に設定してください。 $（ '＃navigationsleiste'）。css（ 'top'、$（document）.scrollTop（））;

Answer 2

私は信じているコメントの中で「なぜギャップがあるのか​​」に対する答えが答えられました。問題を解決する方法について

より一般的に

、：position: fixed：

CSSはあなたのスティッキーメニューのために非常に適していますposition性質を有しています。メニューが表示外にスクロールされると、その位置が固定に変更されます。元の位置に戻ったら、固定位置を削除します。

非常に頻繁にトリガーされるので、スクロールで実行されるメソッドでできるだけ少なくしたいとします。一度スクロールしすぎてコードを実行すると、60fpsの滑らかなフレームレートが失われます。

だから何あなたができることは次のとおりです。

• このポイントがされているかどうかを確認、あなたは常にあなたのスティッキーメニューの一番上にスクロールに離れてウィンドウの上部
• からどれだけ離れているかを知っていることを確認してください
• に達しここで例を示します

それに応じてメニューにクラスを追加または削除：

$(document).ready(function() { 
 
    var $doc = $(document); 
 
    var $menu = $("nav"); 
 
    var menuTop = 0; 
 

 
    var setMenuTop = function() { 
 
    menuTop = $menu.offset().top; 
 
    } 
 

 
    $(window).resize(setMenuTop); 
 

 
    $doc.scroll(function() { 
 
    $menu.toggleClass("is-fixed", ($doc.scrollTop() > menuTop)); 
 
    }); 
 

 
    setMenuTop(); 
 
});

body { 
 
    width: 400px; 
 
    margin: 0 auto; 
 
} 
 
header { 
 
    height: 160px; 
 
    background: orange; 
 
} 
 
nav { 
 
    heigth: 40px; 
 
    background: yellow; 
 
    will-change: transform; 
 
} 
 
nav.is-fixed { 
 
    position: fixed; 
 
    width: 400px; 
 
    top: 0; 
 
} 
 

 
.is-fixed + article { 
 
    margin-top: 40px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header>header</header> 
 
<nav>menu</nav> 
 
<article> 
 
    <h1>content</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam nulla enim placeat? Iure modi quasi facere provident, quidem ducimus impedit nulla harum sunt corrupti. Rem velit architecto omnis molestias, repellat.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam nulla enim placeat? Iure modi quasi facere provident, quidem ducimus impedit nulla harum sunt corrupti. Rem velit architecto omnis molestias, repellat.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam nulla enim placeat? Iure modi quasi facere provident, quidem ducimus impedit nulla harum sunt corrupti. Rem velit architecto omnis molestias, repellat.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam nulla enim placeat? Iure modi quasi facere provident, quidem ducimus impedit nulla harum sunt corrupti. Rem velit architecto omnis molestias, repellat.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam nulla enim placeat? Iure modi quasi facere provident, quidem ducimus impedit nulla harum sunt corrupti. Rem velit architecto omnis molestias, repellat.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam nulla enim placeat? Iure modi quasi facere provident, quidem ducimus impedit nulla harum sunt corrupti. Rem velit architecto omnis molestias, repellat.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam nulla enim placeat? Iure modi quasi facere provident, quidem ducimus impedit nulla harum sunt corrupti. Rem velit architecto omnis molestias, repellat.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam nulla enim placeat? Iure modi quasi facere provident, quidem ducimus impedit nulla harum sunt corrupti. Rem velit architecto omnis molestias, repellat.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam nulla enim placeat? Iure modi quasi facere provident, quidem ducimus impedit nulla harum sunt corrupti. Rem velit architecto omnis molestias, repellat.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam nulla enim placeat? Iure modi quasi facere provident, quidem ducimus impedit nulla harum sunt corrupti. Rem velit architecto omnis molestias, repellat.</p> 
 
</article>