uniapp使用固定定位实现类小红书主页内容吸顶效果

231 阅读1分钟

1. 概要

当目标元素滚动到头部时吸顶,内容区可继续滚动浏览 image.png

2. 思路

  • 获取目标元素起始位到顶部的距离
  • 获取目标元素的滚动距离
  • 当滚动距离大于等于起始位到顶部的距离后,固定定位到顶部

页面布局如下

iwEdAqNwbmcDAQTRASUF0QJ5BrBev4PaZ0ANrgWizegAhpIAB9IhbnWFCAAJomltCgAL0Sx-.png_720x720q90.jpg

3. 代码演示

主要方法:

  • scroll-view实时获取scrollTop值
  • getComputedStyle()获取元素一切样式属性

代码: