WEB天井効果移動終了スティッキーソリューション

オリジナルリンク:Fyerlのブログ

画像のキャプション

一般的なヘッダ天井、通常固定位置決めを実現することができ、地図上の同様のそのような「粘着性シーリング」は、より一般的な要件であります

おそらく考える「スティッキー天井は」これです:まず、天井バー絶対的または相対的な位置に、とき視野領域の天井からの高さjsのイベントをスクロールして聞いては、高さの天井の判定バーの機能をトリガー固定ターゲティングにそれを交換する未満又は0に等しいの上面、および絶対または相対ゼロよりも大きいバックを置き換え

その他のPC側のアイデアや終わりアンドロイド可能ですが、iOSでは、機能の高さを決定しますが、スクロールイベントで毎回トリガされたが、唯一の停止をスライドした後、この機能を起動しません

この変更は、iOS8に作られていることを知らされ、「iOSのonscrollイベント遅延」それをグーグルウェブページをスクロールしたとき、およびないJSトリガの実行
//developer.telerik.com / ...:HTTP

ここでは、私はちょうどあなたが引き金をスクロールする必要がある場合は、それが唯一のネイティブのiOSスクロールを交換するiSroll他のサードパーティ製のライブラリを使用することができ、他のロジックコード天井効果を実装し、ないようにする必要があります

戻る天井問題に彼が追求し、見つかったので、サードパーティ製のライブラリのコストの導入少し大きい効果にために、今まで知っていたが、名前が示すように、positionプロパティの粘着性に注意を払っていない、この属性の役割は、理論的には、粘着性がありますあなたはJSによる「スティッキー天井」を達成することができるようにする必要はありませんが、PCとAndroid、互換性も悪く、の不十分なパフォーマンスのモバイル最後に、このプロパティは、しかし、そして最後にiOSのは、iOS6非常に良いです。システムは、1以上をサポート

画像のキャプション

最終的な解決策があるので:
それは定期的にイベントや使用の固定位置をスクロールして聞いて、Androidのであればまず、現在のシステムを決定し、iOSのは、粘着性のポジショニングを使用します。

//Android
.tab-box-fixed {
  position: fixed;
  z-index: 5;
}
//iOS
.tab-box-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 5;
}

おすすめ

転載: www.cnblogs.com/homehtml/p/12542535.html