モバイル端末HTML 5ナビゲーションバー吸上:IOS(sticky)とAndroidの2つの実装方式

アプリ、フロントエンドH 5ページをミックスし、ナビゲーションバーがスライドしたときに貼り付ける.
注意:
まず書く時、scrollイベントを傍受し、指定された位置にスライドする時、位置position:fixed;に変更し、実際の運用中、IOSはscrollイベントをリアルタイムで傍受することができず、スクロールが停止した後にトリガーされる

 $(window).on("scroll", function () {
        var _this = $(this),
            scrollTop = _this.scrollTop();
        if (topHeight < scrollTop+5) {
          $tabs.addClass("fixed");
        } else {
          $tabs.removeClass("fixed");
        }
      });

調べたところposition:sticky;stickyコード

.sticky {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}

互換性
とくせい
1、stickyはBFCをトリガーしません.親要素はoverflow:hiddenまたはoverflow:autoプロパティではありません
2、スタイルシート書き込みz-indexが無効です.行内style書き込みは有効です.
3、stickyは容器に関するもので、つまりstickyの特性は彼の置かれている容器の中でしか発効しない.すなわち、sticky要素が親要素内でのみ有効であることを強調するのは、実際の使用では、親要素の高さがsticky要素の高さよりも低くてはならないからである.
最終コード:

if (isIos) {
      $tabs.addClass("sticky");
} else {
      var topHeight = $(".top").height();
      var navHeight = $tabs.height();
      $(window).on("scroll", function () {
        var _this = $(this),
            scrollTop = _this.scrollTop();
        if (topHeight < scrollTop+5) {
          $tabs.addClass("fixed");
        } else {
          $tabs.removeClass("fixed");
        }
      });
    }

参考記事:1.https://www.jianshu.com/p/b72f504121f5 2. http://web.jobbole.com/90352/