微信小程序--特定區(qū)域滾動到頂部時固定的方法

更新時間：2019年04月28日 11:17:35 作者：優(yōu)雅的勒布朗

這篇文章主要介紹了微信小程序--特定區(qū)域滾動到頂部時固定的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

項目要求：

如圖所示，當頁面滾動到導航條到達搜索欄下方時固定，向上滾動到導航條位置時又恢復原樣。
以下是代碼展示：

1.wxml

<scroll-view style="width:100%;height: 100%;" scroll-y="true" bindscroll="scrollTopFun">
  <view class="{{top>130 ? 'topnav' : ''}}">
  <--這里寫大于130，表示距離頂部130rpx時固定，可根據(jù)需要修改-->
    ...
  </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（滾動時觸發(fā)）。通過這個屬性獲取瀏覽器滾動條距離頂部的位置，通過這個位置判斷class類的顯示就可以了。

以上所述是小編給大家介紹的微信小程序--特定區(qū)域滾動到頂部時固定的方法詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

js獲取圖片寬高的方法
這篇文章主要介紹了js獲取圖片寬高的方法，快速獲取圖片的寬高其實是為了預先做好排版樣式布局做準備，需要的朋友可以參考下
2015-11-11
JS如何生成一個不重復的ID的函數(shù)
這篇文章主要介紹了JS如何生成一個不重復的ID的函數(shù)，非常不錯，具有參考借鑒價值，需要的朋友參考下
2016-12-12
JavaScript利用構造函數(shù)和原型的方式模擬C#類的功能
這篇文章主要介紹了JavaScript利用構造函數(shù)和原型的方式模擬C#類的功能。需要的朋友可以過來參考下，希望對大家有所幫助
2014-03-03
blob轉換成string格式同步調用問題解決分析
這篇文章主要為大家介紹了blob轉換成string格式同步調用問題解決分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-05-05
js操作checkbox遇到的問題解決
這篇文章介紹了js操作checkbox遇到的問題解決，有需要的朋友可以參考一下
2013-06-06
JavaScript?賦值,淺復制和深復制的區(qū)別
這篇文章主要介紹了JavaScript?賦值,淺復制和深復制的區(qū)別，文章圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的小伙伴可以參考一下
2022-05-05
常用javascript表單驗證匯總
這篇文章主要介紹了一些常用javascript表單驗證，文章最后還附帶了一個實踐案例，以驗證數(shù)字為例進行講解，感興趣的小伙伴們可以參考一下
2015-11-11
JS模擬實現(xiàn)Select效果代碼
這篇文章主要介紹了JS模擬實現(xiàn)Select效果代碼,涉及JavaScript基于鼠標點擊事件動態(tài)操作頁面元素實現(xiàn)Select效果的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-09-09
JS中進行字符串替換的方法
replace() 方法用于在字符串中用一些字符替換另一些字符，或替換一個與正則表達式匹配的子串，這篇文章主要介紹了js中進行字符串替換的方法,需要的朋友可以參考下
2024-01-01
無阻塞加載腳本分析[全]
script標簽的阻塞行為會對頁面性能產(chǎn)生負面影響，大多數(shù)瀏覽器在下載或執(zhí)行腳本的同時，會阻塞下載位于它之后的資源，也會阻塞渲染位于它之后的元素。
2011-01-01