Zobraziť na navigačnom paneli plávajúci navigačný panel - javascript, jquery, css, navigácia, blogger

Používam blogspot a chcel som presne dosiahnuť tento druh plávajúceho navigačného panela:

http://apairandasparediy.com/

Ako vidíte, počas posúvania sa pohyblivý navigačný panel zobrazuje, keď sa posúva.

Všetko, čo viem, je vytvoriť navigačnú lištu:

<div id="floating-nav-content">
<div class="floating-nav">
<ul id="menu-floating-menu" class="menu">
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
</div>

Ale zvyšok jQuery alebo javascript je pre mňa stále neznámy. Tiež hľadám, ale neučia presne to, čo chcem.

Som len nový pre jQuery a stále nemám tušenie, ako to realizovať.

Vaša pomoc je veľmi cenená.

odpovede:

Toto by malo robiť to, čo chcete. (za predpokladu, že ste už zahrnuli knižnicu jQuery)

    <script type="text/javascript">
$(document).scroll(function() {
if ($(this).scrollTop() == 0) {
$("#floating-nav-content").slideUp(400);
} else {
$("#floating-nav-content").slideDown(600);
}

});
</script>

CSS je tiež dôležité, pretože navigačný panel umiestňuje pevnú pozíciu na vrch stránky.

    <style type="text/css">
html, body {
margin: 0;
padding: 0;
}

#floating-nav-content {
top: 0;
width: 100%;
height: 20px;
background-color: #000;
position: fixed;
display: none;
color: #FFF;
padding: 5px;
}
</style>

A samozrejme HTML. Položil som všetky vyššie uvedené a nižšie v značke tela.

    <div id="floating-nav-content">
Content
</div>