微信小程序特定区域怎样实现滚动到顶部时固定

本文主要介绍了微信小程序--特定区域滚动到顶部时固定的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧！

如图所示，当页面滚动到导航条到达搜索栏下方时固定，向上滚动到导航条位置时又恢复原样。以下是代码展示：

1.wxml

scroll-view style="width:100%;
    height: 100%;
    " scroll-y="true" bindscroll="scrollTopFun">

  view class="{
{
    top>
130 ? ´topnav´ : ´´}
}
    ">
    
    --这里写大于130，表示距离顶部130rpx时固定，可根据需要修改-->
    
    ...
  /view>
    
/scroll-view>

2.wxss

.topnav{
    
  position: fixed;
    
  top: 85rpx;
    
  z-index:99;
    
  background: #fff;
    
  width: 100%;

}

3.js

data = {

  top:0
}


//控制回到顶部按钮的显示与消失
scrollTopFun(e){
    
  let that = this;
    
  that.top = e.detail.scrollTop;
    
  that.$apply();

}
    

其实整个思路很简单， 小程序自带的组件scroll-view自带有属性bindscroll（滚动时触发）。通过这个属性获取浏览器滚动条距离顶部的位置，通过这个位置判断class类的显示就可以了。

以上所述是小编给大家介绍的微信小程序--特定区域滚动到顶部时固定的方法详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

若资源对你有帮助，浏览后有很大收获，不妨小额打赏我一下，你的鼓励是维持我不断写博客最大动力。

想获取DD博客最新代码，你可以扫描下方的二维码，关注DD博客微信公众号（ddblogs）。

或者你也可以关注我的新浪微博，了解DD博客的最新动态：DD博客官方微博（dwtedx的微博）。

如对资源有任何疑问或觉得仍然有很大的改善空间，可以对该博文进行评论，希望不吝赐教。

为保证及时回复，可以使用博客留言板给我留言: DD博客留言板（dwtedx的留言板）。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！