溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了微信小程序如何實現特定區域滾動到頂部時固定，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
項目要求：
如圖所示，當頁面滾動到導航條到達搜索欄下方時固定，向上滾動到導航條位置時又恢復原樣。
以下是代碼展示：
1.wxml
<scroll-view 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類的顯示就可以了。
感謝你能夠認真閱讀完這篇文章，希望小編分享的“微信小程序如何實現特定區域滾動到頂部時固定”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
