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

資訊專欄INFORMATION COLUMN

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

Object / 3216人閱讀

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

前言

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

拋思路

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

template 



    
    

        
        

             {{item.name}}
        

     
     

          

               {{sub_item}}
style

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

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

重頭戲來了，我們一步一步順清楚。
1.數據初始化
2.事件監聽
3.邏輯判斷

數據初始化
具體的數據可根據實際情況修改，這里的數據以效果圖為準
//添加A-Z數組
let baseAtoZArray = [];//生成A-Z的字母
for (let i = 65; i < 91; i++) {
    baseAtoZArray.push(String.fromCharCode(i));
}
//均分數組并添加相應的數據，每個子數組最多有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]),//符合該條件的下方內容，與本文關系不大
    };
}
//添加期望工作城市與熱門城市
this.baseArray = [
{
    name: "期望工作城市",
    idName: `base-line`,
    fiexdItem: 1000,
    list: [this.location],
},
{
    name: "熱門城市",
    idName: `hot-line`,
    fiexdItem: 100,
    list: this.$config.HOT_CITIES,
},...this.baseArray];
事件監聽+邏輯判斷
//監聽滾動事件
//界面加載完成后，將每一層header距離頭部的距離記錄下來
for (let item of that.baseArray) {
    item.top = $("#" + item.idName).offset().top
}
$(".scroll-div").on("scroll", function () {
    //對每一項數據監測
    for (let item of that.baseArray) {
        if (this.scrollTop  > item.top - 20) {
            //因為在同一高度中，只可能有一個header，所以設置一個，其他header不匹配，然后duang的一下符合條件的就fixed住了
            that.fiexdItem = item.fiexdItem;
        }
    }
});

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

效果圖

后話

最近產出有點多，希望能對大家有所幫助

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97656.html

相關文章

  • 如何使用數組實現滑動窗口

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

    不知名網友 評論0 收藏0

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

    摘要：框架下拉刷新控件還能框架化智能又怎么回事二話不多少先上效果圖，咱們再來探個究竟。下面通過自定義和嵌套作為內容來解釋的智能之處?？梢钥吹皆诹斜硪呀洕L動到中部時，輕微下拉列表是不會觸發刷新的，但是如果是觸摸固定的布局，則可以觸發下拉。 框架？下拉刷新控件還能框架化？智能又怎么回事？二話不多少先上Demo效果圖，咱們再來探個究竟。 Github 傳送門注意：本文僅僅是博客文章，主要用于項目介...

    MadPecker 評論0 收藏0

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

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

    shiyang6017 評論0 收藏0

發表評論

0條評論

Object

男|高級講師

TA的文章

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