資訊專欄INFORMATION COLUMN
摘要：前言最近公司事情比較少，正好早上有人問我那個(gè)滑動(dòng)粘著頭部不動(dòng)的怎么實(shí)現(xiàn)，我想了半天，前幾天剛剛寫過，那就記錄一下咯。
前言
最近公司事情比較少，正好早上有人問我那個(gè)滑動(dòng)粘著頭部不動(dòng)的怎么實(shí)現(xiàn)，我想了半天，前幾天剛剛寫過，那就記錄一下咯。于是，女朋友送了我一張圖
其實(shí)思路還蠻簡單的，監(jiān)聽容器div的滾動(dòng)時(shí)間，及每個(gè)需要fixed的高度，滑到這個(gè)對應(yīng)高度了，fixed住就行了?？赡苡悬c(diǎn)籠統(tǒng)，我們結(jié)合代碼說吧。
今天我們從基本的template-script-style模式來貼代碼好了
[圖片上傳失敗...(image-444c6e-1536305058022)]
style{{item.name}}{{sub_item}}然后是css部分，這里用了scss的寫法，具體是什么，自行百度或谷歌，其中只列出了有關(guān)的樣式，剩余部分用...省略
.scroll-div { width: 100%; overflow: auto; ... } .info-line { ... //這個(gè)都不是特別重要 } .fiexd_line { position: fixed; width: 100%; ... }script重頭戲來了，我們一步一步順清楚。
1.數(shù)據(jù)初始化
2.事件監(jiān)聽
3.邏輯判斷數(shù)據(jù)初始化
具體的數(shù)據(jù)可根據(jù)實(shí)際情況修改，這里的數(shù)據(jù)以效果圖為準(zhǔn) //添加A-Z數(shù)組 let baseAtoZArray = [];//生成A-Z的字母 for (let i = 65; i < 91; i++) { baseAtoZArray.push(String.fromCharCode(i)); } //均分?jǐn)?shù)組并添加相應(yīng)的數(shù)據(jù)，每個(gè)子數(shù)組最多有7個(gè)元素 this.baseArray = [...chunk(baseAtoZArray, 7)]; for (let item of this.baseArray) { this.baseArray[this.baseArray.indexOf(item)] = { name: item.join(""),//顯示的文本 idName: `${item[0]}2${item[item.length - 1]}-line`,//唯一id,es6模版字符串和下方的...運(yùn)算符了解下 fiexdItem: this.baseArray.indexOf(item),//fixed標(biāo)識 list: this.getRegList(item[0], item[item.length - 1]),//符合該條件的下方內(nèi)容，與本文關(guān)系不大 }; } //添加期望工作城市與熱門城市 this.baseArray = [ { name: "期望工作城市", idName: `base-line`, fiexdItem: 1000, list: [this.location], }, { name: "熱門城市", idName: `hot-line`, fiexdItem: 100, list: this.$config.HOT_CITIES, },...this.baseArray];事件監(jiān)聽+邏輯判斷
//監(jiān)聽滾動(dòng)事件 //界面加載完成后，將每一層header距離頭部的距離記錄下來 for (let item of that.baseArray) { item.top = $("#" + item.idName).offset().top } $(".scroll-div").on("scroll", function () { //對每一項(xiàng)數(shù)據(jù)監(jiān)測 for (let item of that.baseArray) { if (this.scrollTop > item.top - 20) { //因?yàn)樵谕桓叨戎校豢赡苡幸粋€(gè)header，所以設(shè)置一個(gè)，其他header不匹配，然后duang的一下符合條件的就fixed住了 that.fiexdItem = item.fiexdItem; } } });代碼就這么多，主要是數(shù)據(jù)準(zhǔn)備上以及獲取上要下點(diǎn)功夫，還有很多需要優(yōu)化的地方，騷年們加油吧，在這里我就給你們喊:
效果圖 后話最近產(chǎn)出有點(diǎn)多，希望能對大家有所幫助
好了，要被老板拖過去搬磚了，下次見，有空點(diǎn)點(diǎn)github嘛。
這是我的github，歡迎大佬們猛戳，不定時(shí)更新
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/97656.html
摘要：理解數(shù)組實(shí)現(xiàn)的滑動(dòng)窗口，看下邊這個(gè)圖就可以了。第秒，開始計(jì)數(shù)，此時(shí)數(shù)組內(nèi)開始存入計(jì)數(shù)周期，保存在數(shù)組第個(gè)位置，表示這是當(dāng)前滑動(dòng)窗口內(nèi)的第個(gè)計(jì)數(shù)周期。在FireflySoft.RateLimit之前的版本中，進(jìn)程內(nèi)滑動(dòng)窗口的實(shí)現(xiàn)是基于MemoryCache做的，雖然能夠正確的實(shí)現(xiàn)滑動(dòng)窗口的算法邏輯，但是性能比較差，其吞吐量只有其它算法的1/4。性能為何如此之差呢？滑動(dòng)窗口的原理我們先來看下滑動(dòng)...
摘要：框架下拉刷新控件還能框架化智能又怎么回事二話不多少先上效果圖，咱們再來探個(gè)究竟。下面通過自定義和嵌套作為內(nèi)容來解釋的智能之處?？梢钥吹皆诹斜硪呀?jīng)滾動(dòng)到中部時(shí)，輕微下拉列表是不會(huì)觸發(fā)刷新的，但是如果是觸摸固定的布局，則可以觸發(fā)下拉。 框架？下拉刷新控件還能框架化？智能又怎么回事？二話不多少先上Demo效果圖，咱們再來探個(gè)究竟。 Github 傳送門注意：本文僅僅是博客文章，主要用于項(xiàng)目介...
摘要：但是，在蒙層元素中滑動(dòng)的時(shí)候，滑到內(nèi)容的盡頭時(shí)，再繼續(xù)滑動(dòng)，蒙層底部的頁面會(huì)開始滾動(dòng)，顯然這不是我們想要的效果，因此需要阻止這種行為。部分安卓機(jī)型以及中，無法無法阻止底部頁面滾動(dòng)。為蒙層容器節(jié)點(diǎn)簡單粗暴，滾動(dòng)時(shí)底部頁面也無法動(dòng)彈了。 場景概述 彈窗是一種常見的交互方式，而蒙層是彈窗必不可少的元素，用于隔斷頁面與彈窗區(qū)塊，暫時(shí)阻斷頁面的交互。但是，在蒙層元素中滑動(dòng)的時(shí)候，滑到內(nèi)容的盡頭時(shí)...
閱讀 1720·2021-11-25 09:43
閱讀 2681·2019-08-30 15:53
閱讀 1832·2019-08-30 15:52
閱讀 2911·2019-08-29 13:56
閱讀 3333·2019-08-26 12:12
閱讀 576·2019-08-23 17:58
閱讀 2151·2019-08-23 16:59
閱讀 945·2019-08-23 16:21
