微信小程序--特定區(qū)域滾動(dòng)到頂部時(shí)固定的方法
更新時(shí)間：2019年04月28日 11:17:35 作者：優(yōu)雅的勒布朗
這篇文章主要介紹了微信小程序--特定區(qū)域滾動(dòng)到頂部時(shí)固定的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
項(xiàng)目要求：
如圖所示，當(dāng)頁面滾動(dòng)到導(dǎo)航條到達(dá)搜索欄下方時(shí)固定，向上滾動(dòng)到導(dǎo)航條位置時(shí)又恢復(fù)原樣。
以下是代碼展示：
1.wxml
<scroll-view style="width:100%;height: 100%;" scroll-y="true" bindscroll="scrollTopFun">
<view class="{{top>130 ? 'topnav' : ''}}">
<--這里寫大于130，表示距離頂部130rpx時(shí)固定，可根據(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();
}
其實(shí)整個(gè)思路很簡單， 小程序自帶的組件scroll-view自帶有屬性bindscroll（滾動(dòng)時(shí)觸發(fā)）。通過這個(gè)屬性獲取瀏覽器滾動(dòng)條距離頂部的位置，通過這個(gè)位置判斷class類的顯示就可以了。
以上所述是小編給大家介紹的微信小程序--特定區(qū)域滾動(dòng)到頂部時(shí)固定的方法詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了js獲取圖片寬高的方法，快速獲取圖片的寬高其實(shí)是為了預(yù)先做好排版樣式布局做準(zhǔn)備，需要的朋友可以參考下2015-11-11
JS如何生成一個(gè)不重復(fù)的ID的函數(shù)
這篇文章主要介紹了JS如何生成一個(gè)不重復(fù)的ID的函數(shù)，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下2016-12-12
JavaScript利用構(gòu)造函數(shù)和原型的方式模擬C#類的功能
這篇文章主要介紹了JavaScript利用構(gòu)造函數(shù)和原型的方式模擬C#類的功能。需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-03-03
blob轉(zhuǎn)換成string格式同步調(diào)用問題解決分析
這篇文章主要為大家介紹了blob轉(zhuǎn)換成string格式同步調(diào)用問題解決分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
這篇文章介紹了js操作checkbox遇到的問題解決，有需要的朋友可以參考一下2013-06-06
JavaScript?賦值,淺復(fù)制和深復(fù)制的區(qū)別
這篇文章主要介紹了JavaScript?賦值,淺復(fù)制和深復(fù)制的區(qū)別，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-05-05
這篇文章主要介紹了一些常用javascript表單驗(yàn)證，文章最后還附帶了一個(gè)實(shí)踐案例，以驗(yàn)證數(shù)字為例進(jìn)行講解，感興趣的小伙伴們可以參考一下2015-11-11
這篇文章主要介紹了JS模擬實(shí)現(xiàn)Select效果代碼,涉及JavaScript基于鼠標(biāo)點(diǎn)擊事件動(dòng)態(tài)操作頁面元素實(shí)現(xiàn)Select效果的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
replace() 方法用于在字符串中用一些字符替換另一些字符，或替換一個(gè)與正則表達(dá)式匹配的子串，這篇文章主要介紹了js中進(jìn)行字符串替換的方法,需要的朋友可以參考下2024-01-01![無阻塞加載腳本分析[全]](http://img.jbzj.com/images/xgimg/bcimg9.png)
script標(biāo)簽的阻塞行為會(huì)對(duì)頁面性能產(chǎn)生負(fù)面影響，大多數(shù)瀏覽器在下載或執(zhí)行腳本的同時(shí)，會(huì)阻塞下載位于它之后的資源，也會(huì)阻塞渲染位于它之后的元素。2011-01-01