移动端HTML5导航栏吸顶：IOS（sticky）和Android两种实现方式

混合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");
        }
      });
    }

参考文章：
1. https://www.jianshu.com/p/b72f504121f5
2. http://web.jobbole.com/90352/