关于“微信小程序特定区域怎样实现滚动到顶部时固定”的知识点有一些人不是很理解，对此小编给大家总结了相关内容，文中的内容简单清晰，易于学习与理解，具有一定的参考学习价值，希望能对大家有所帮助，接下来就跟随小编一起学习一下“微信小程序特定区域怎样实现滚动到顶部时固定”吧。

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

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

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的留言板）。

到此这篇关于“微信小程序特定区域怎样实现滚动到顶部时固定”的文章就介绍到这了，感谢各位的阅读，更多相关微信小程序特定区域怎样实现滚动到顶部时固定内容，欢迎关注群英网络资讯频道，小编将为大家输出更多高质量的实用文章！

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。