--------------------------- HTML ---------------------- -
<ビュークラス= "ナビゲーションバーラップ">
<ビュークラス= "列{{isFixedTop '固定'： ''}}" ID = "ナビゲーションバー">
<ビュークラス= "アクティブブロック">新品推荐</ビュー>
<ビュークラス= "ブロック">限时优惠</ビュー>
<ビュークラス= "ブロック">火爆热搜</ビュー>
<ビュークラス= "ブロック">猜你喜欢</ビュー>
</ビュー>
<！ -用于吸顶后占位用的- >
<ビュークラス= "列" WX：もし= "{{isFixedTop}}"> </ビュー>
</ビュー>
<Viewクラス= "リスト{{isFixedTop 'martop' :? ''}}">リストデータ</ビュー>
--------------------------- CSS ---------------------- -
.navbarラップ{
幅：100％。
}
.navbarラップ.column {
幅：100％。
高さ：80rpx。
表示：フレックス。
フレックス方向：行。
ALIGN-アイテム：センター;
正当化-コンテンツ：スペースアラウンド。
背景：#FFF;
border-bottom：1pxの固体の#eee;
トップ：0;
左：0;
Zインデックス：100;
}
.column.fixed {.navbarラップ
位置：固定されました。
}
{.martop
マージントップ：「オブジェクトの天井の高さ」
}
------------------------ JS -------------------------
ページ（{
データ：{
navbarInitTop：0、トップナビゲーションバー//初期化からの距離
isFixedTop：偽、//トップを固定した場合
}、
/ **
*ライフサイクル機能-ページのロードをリッスン
* /
のonLoad：機能（オプション）{
}、
/ **
*ライフサイクル機能-ページ表示モニタ
* /
onShow：関数（）{
VAR =このこと。
IF（that.data.navbarInitTop == 0）{
//最上位ノードから距離取得
（ '＃ナビゲーションバー'）boundingClientRect（関数（RECT）を選択）（wx.createSelectorQueryを{..
IF（RECT && rect.top> 0）{
VAR = navbarInitTopのparseInt（rect.top）。
that.setData（{
navbarInitTop：navbarInitTop
}）;
}
}）Execの（）。
}
}、
/ **
*ページスリップイベントリスナー
* /
onPageScroll：機能（E）{
VAR =このこと;
VAR = scrollTopスプライトのparseInt（e.scrollTop）; //上からスクロールバーの高さ
分析//「スクロール」と転がり距離決意するの頂上から「最初の要素の距離
VAR = :?真falseにするisSatisfy scrollTopスプライト> = that.data.navbarInitTop;
防止のsetDataに//ストップ、ここで行います決意の方程式。唯一の天井に閾値に等しくないであろう
（that.data.isFixedTop === isSatisfy）IF {
falseに戻り;
}
that.setData（{
isFixedTop：isSatisfy
}）。
}
}）