混合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. /p/b72f504121f5
2. /90352/