国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

滑動頭部固定，要不也了解下？

Object / 3222人閱讀

摘要：前言最近公司事情比較少，正好早上有人問我那個滑動粘著頭部不動的怎么實現(xiàn)，我想了半天，前幾天剛剛寫過，那就記錄一下咯。

前言

最近公司事情比較少，正好早上有人問我那個滑動粘著頭部不動的怎么實現(xiàn)，我想了半天，前幾天剛剛寫過，那就記錄一下咯。于是，女朋友送了我一張圖

拋思路

其實思路還蠻簡單的，監(jiān)聽容器div的滾動時間，及每個需要fixed的高度，滑到這個對應(yīng)高度了，fixed住就行了。可能有點籠統(tǒng)，我們結(jié)合代碼說吧。
今天我們從基本的template-script-style模式來貼代碼好了
[圖片上傳失敗...(image-444c6e-1536305058022)]

template 



    
    

        
        

             {{item.name}}
        

     
     

          

               {{sub_item}}
style

然后是css部分，這里用了scss的寫法，具體是什么，自行百度或谷歌，其中只列出了有關(guān)的樣式，剩余部分用...省略

.scroll-div {
      width: 100%;
      overflow: auto;
      ...
    }
    .info-line {
     ...
     //這個都不是特別重要
    }
    .fiexd_line {
      position: fixed;
      width: 100%;
      ...
    }
script

重頭戲來了，我們一步一步順清楚。
1.數(shù)據(jù)初始化
2.事件監(jiān)聽
3.邏輯判斷

數(shù)據(jù)初始化
具體的數(shù)據(jù)可根據(jù)實際情況修改，這里的數(shù)據(jù)以效果圖為準
//添加A-Z數(shù)組
let baseAtoZArray = [];//生成A-Z的字母
for (let i = 65; i < 91; i++) {
    baseAtoZArray.push(String.fromCharCode(i));
}
//均分數(shù)組并添加相應(yīng)的數(shù)據(jù)，每個子數(shù)組最多有7個元素
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模版字符串和下方的...運算符了解下
        fiexdItem: this.baseArray.indexOf(item),//fixed標識
        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)聽滾動事件
//界面加載完成后，將每一層header距離頭部的距離記錄下來
for (let item of that.baseArray) {
    item.top = $("#" + item.idName).offset().top
}
$(".scroll-div").on("scroll", function () {
    //對每一項數(shù)據(jù)監(jiān)測
    for (let item of that.baseArray) {
        if (this.scrollTop  > item.top - 20) {
            //因為在同一高度中，只可能有一個header，所以設(shè)置一個，其他header不匹配，然后duang的一下符合條件的就fixed住了
            that.fiexdItem = item.fiexdItem;
        }
    }
});

代碼就這么多，主要是數(shù)據(jù)準備上以及獲取上要下點功夫，還有很多需要優(yōu)化的地方，騷年們加油吧，在這里我就給你們喊:

效果圖

后話

最近產(chǎn)出有點多，希望能對大家有所幫助

好了，要被老板拖過去搬磚了，下次見，有空點點github嘛。

這是我的github，歡迎大佬們猛戳，不定時更新

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/97656.html

相關(guān)文章

  • 如何使用數(shù)組實現(xiàn)滑動窗口

    摘要：理解數(shù)組實現(xiàn)的滑動窗口，看下邊這個圖就可以了。第秒，開始計數(shù)，此時數(shù)組內(nèi)開始存入計數(shù)周期，保存在數(shù)組第個位置，表示這是當前滑動窗口內(nèi)的第個計數(shù)周期。在FireflySoft.RateLimit之前的版本中，進程內(nèi)滑動窗口的實現(xiàn)是基于MemoryCache做的，雖然能夠正確的實現(xiàn)滑動窗口的算法邏輯，但是性能比較差，其吞吐量只有其它算法的1/4。性能為何如此之差呢？滑動窗口的原理我們先來看下滑動...

    不知名網(wǎng)友 評論0 收藏0

  • Android智能下拉刷新框架-SmartRefreshLayout

    摘要：框架下拉刷新控件還能框架化智能又怎么回事二話不多少先上效果圖，咱們再來探個究竟。下面通過自定義和嵌套作為內(nèi)容來解釋的智能之處。可以看到在列表已經(jīng)滾動到中部時，輕微下拉列表是不會觸發(fā)刷新的，但是如果是觸摸固定的布局，則可以觸發(fā)下拉。 框架？下拉刷新控件還能框架化？智能又怎么回事？二話不多少先上Demo效果圖，咱們再來探個究竟。 Github 傳送門注意：本文僅僅是博客文章，主要用于項目介...

    MadPecker 評論0 收藏0

  • 禁止蒙層底部頁面跟隨滾動

    摘要：但是，在蒙層元素中滑動的時候，滑到內(nèi)容的盡頭時，再繼續(xù)滑動，蒙層底部的頁面會開始滾動，顯然這不是我們想要的效果，因此需要阻止這種行為。部分安卓機型以及中，無法無法阻止底部頁面滾動。為蒙層容器節(jié)點簡單粗暴，滾動時底部頁面也無法動彈了。 場景概述 彈窗是一種常見的交互方式，而蒙層是彈窗必不可少的元素，用于隔斷頁面與彈窗區(qū)塊，暫時阻斷頁面的交互。但是，在蒙層元素中滑動的時候，滑到內(nèi)容的盡頭時...

    shiyang6017 評論0 收藏0

發(fā)表評論

0條評論

Object

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<