提高自己网站/沧州网站优化

1. 效果图

菜单正常嵌入在页面中

菜单位置滑动到距离可视窗口0px时，脱离文档流固定在页面顶部

2.常见实现方案

1. 查询菜单栏距离文档顶部的距离menuTop
2. 监听页面滚动距离scrollTop
3. 当页面滚动距离scrollTop > menuTop菜单栏距离文档顶部的距离时，菜单栏固定定位

<view class="menu {{menuFixed ? 'fixed': ''}}" id="affix">菜单栏</view>

// 1.查询菜单栏距离文档顶部的距离menuTopvar initClientRect = function () {var that = this;var query = wx.createSelectorQuery()query.select('#affix').boundingClientRect()query.exec(function (res) {that.setData({menuTop: res[0]})})}
// 2.监听页面滚动距离scrollToponPageScroll: function (scroll, that) {if (that.data.menuFixed === (scroll.detail.scrollTop > that.data.menuTop)) return;
// 3.当页面滚动距离scrollTop > menuTop菜单栏距离文档顶部的距离时，菜单栏固定定位that.setData({menuFixed: (scroll.detail.scrollTop > that.data.menuTop)})}

这个方法有一些问题：
1. menu距离文档顶部的高度实际 = query查询出来的距可视窗口顶部的高度menuTop+元素已经滚动过的距离（我们这里偷懒只算了menuTop，默认页面初始化时进行查询，此时页面尚未发生滚动）
2.query查询的时机应该为，位于menu上面的元素都已经加载渲染完成后，即如果上面的元素依赖API请求返回的数据时，需要等待API请求完成。如果查询时机不对的话，非常容易查出来的是不准确的高度
针对问题1、2，如果你的页面元素是定高的，可以通过 元素1*高度1+元素2*高度2+…+元素3*高度3 进行计算，这结果是很稳的
3. 通过监听页面滚动，判断两个距离大小而设置固定定位，效果在部分安卓机上看起来很不流畅，我的小米上看起来就非常捉鸡==

3.新选择 position:sticky

一个处于实验性的取值, 粘性定位.元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。
而后，元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

说了这么说，简言之这个属性简直就是为了实现吸顶而量身定做的
现在只要给menu一个stickyClass就解决所有问题了！

<view class="menu stickyClass" id="affix">菜单栏</view>

.stickyClass{position: sticky;top: 0 //当menu元素距离可视窗口顶部<0时，menu由static定位切换为fixed定位
}

but， 你以为这是一个happy ending吗？ 并不，他有一个不容乐观的兼容性，
小程序对他的支持还很差。据了解，安卓平台某些情况下如果小程序的webview内核没有安装或没有成功加载，会fallback使用系统内核（系统内核可能是支持sticky的），但是比例应该不高。 我的小米也不支持，希望微信官方加油==

所以逼逼了这么久，我线上还是用的我喷了好久的方法，希望大家可以用上革命新曙光 orz….