微信小程序----导航栏滑动定位（实现CSS3的position:sticky效果）

最新推荐文章于 2024-07-17 19:08:41 发布

liNewman

最新推荐文章于 2024-07-17 19:08:41 发布

阅读量1.2k

点赞数 1

本文链接：https://blog.csdn.net/liNewman/article/details/86576697

版权

本文介绍了如何在微信小程序中实现CSS3的position:sticky效果，通过监听scroll事件和切换导航栏的position实现滑动定位。但存在定位不及时、体验不佳等问题，适合学习参考，不推荐用于实际项目。

摘要由CSDN通过智能技术生成

微信小程序----导航栏滑动定位（实现CSS3的position:sticky效果）

DEMO下载

实现的效果

微信小程序实现position：sticky

实现的原理

通过对scroll的监听获取滚动条的scrollTop值;

在导航的class判断scrollTop;

切换position:fixed与position:relative。

WXML

<view style="height:100%;position:fixed;width:100%;">
  <scroll-view scroll-y="false"  bindscroll="scroll" style="height:100%;">
    <view class="page-bottom-content">
      <text>{
      {
      text}}</text>
    </view>
    <view class="page-banner">
      banner
    </view>