混合App，前端H5頁面，實現導航欄滑動到的時候貼頂。

注意：

首先寫的時候，監聽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");
        }
      });
    }