小程序当某元素到一定高度时 设置固定

本文介绍了在微信小程序中,如何实现当元素滚动到一定高度时将其设置为固定位置的方法。通过监听页面滚动高度`scrollTop`并与元素距离顶部高度`heightArr`比较,动态添加样式和设置元素`top`属性,实现自定义头部标签栏的智能固定效果。
摘要由CSDN通过智能技术生成
html代码

<view id="navHeight" class="scroll-view-container-main  {
  {scrollTop>heightArr?'topnav':''}}" style="top:{
  {scrollTop>heightArr?navBarHeight+88:''}}px;">
      <scroll-view scroll-x="true" class="scroll-view-container">
        <block wx:for="{
  {tabList}}" wx:key="index">
          <view class="top-scroll-view-item">内容</view>
        </block>
      </scroll-view>
</view>

class="scroll-view-container-main  { {scrollTop>heightArr?'topnav':''}}"   ---   动态添加样式  topnav

{ {scrollTop>heightArr?'topnav':''}}    ---    scrollTop --- 是监听页面滑动的高度       heightArr --- 是dom元素距离顶部的高度

style=&#

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值