なぜそのような要求があるのですか？スクロールすると、ナビゲーションバーが上部の位置に浮かぶウェブサイトを海外に見つけましたか。ユーザーがコンテンツを表示したい場合は、クリックして直接到達でき、ドラッグ時間を大幅に節約できます。もちろん、トップに戻る方が簡単です。しかし、時には上部に戻るボタンが見落とされがちです。コードとデモンストレーションを見てみましょう（ jquery 1.9を紹介します）。
マウスがスクロールアップするかスクロールダウンするかを判断するには、ユーザーの最後のスクロールの座標を次回の座標と比較できます。最後の時間が次回よりも少ない場合、つまりユーザーが下にスクロールしている場合、そうでない場合、ユーザーがスクロールアップしていることを意味します。スクロール座標値は、ウィンドウのスクロールトップとして使用できます。
HTMLコードの例
<div id = "jnav"> <ul> <li> <a href = "http://caibaojian.com/"> Webフロントエンド開発</a> </li> <li> <a href = "＃" href = "＃">フロントエンド開発</a> </li> <li> <a href = "＃">フロントエンド開発</a> </li> </ul> </div>
JavaScriptコードの例
var $ nav = $（ '＃jnav'）、navtop = $ nav.offset（）。top、navh = $ nav.outerheight（）、wintop_1 = 0、winwidth = $（windo）.width（）、holder = jquery（ '<div>'）; $（windop）.on（ 'bs broll'、var wintop_2（）{var wintop_2（）。 holder.css（navh）; if（wintop_2> winwidth> 980）{'removeclass（' fixed-nav-appear '）}CSSコードの例
.nav {width：980px;マージン：0 auto;}。nav li {display：inline-block; *表示：インライン; *ズーム：1;マージン：0 10px;}。nav li a {display：block;パディング：5px 10px;}。固定nav {位置：固定;幅：100％;上：-40px; -webkit-transition：トップ.5; -moz-transition：トップ.5s; -O-Transition：トップ.5S;遷移：トップ.5; -webkit-box-shadow：0 2px 2px rgba（0,0,0、.1）; -moz-box-shadow：0 2px 2px rgba（0,0,0、.1）; Box-Shadow：0 2px 2px RGBA（0,0,0、.1）;}。上記は、マウスがスクロールするときにJSを使用してフローティングナビゲーションを実装する方法の例です。興味がある場合は、参照してください。