JavaScript 滑动头部固定,要不也了解下?

qianbin01 · 2018年09月09日 · 105 次阅读

前言

最近公司事情比较少,正好早上有人问我那个滑动粘着头部不动的怎么实现,我想了半天,前几天刚刚写过,那就记录一下咯。于是,女朋友送了我一张图 output_1536301166.gif

抛思路

其实思路还蛮简单的,监听容器div的滚动时间,及每个需要fixed的高度,滑到这个对应高度了,fixed住就行了。可能有点笼统,我们结合代码说吧。 今天我们从基本的template-script-style模式来贴代码好了 [图片上传失败...(image-444c6e-1536305058022)]

template

<!--滑动的容器-->
<div class="scroll-div">
    <!--一个头部加一个item的容器-->
    <div class="for-class" v-for="item in baseArray">
        <!--需要fixed住的头部,id为获取具体位置使用,可替换成ref
        绑定class实现添加fixed样式作用-->
        <div class="info-line"
             :id="item.idName"
             :class="{fiexd_line:fiexdItem===item.fiexdItem}">
             {{item.name}}
        </div>
     <!--下方的item,这里与本文关系不到,可忽略-->
     <div class="detail-container" 
          :class="{margin_top:fiexdItem===1000}">
          <div class="detail-item"
               v-for="sub_item in item.list"
               @user1="setLocation(sub_item)">
               {{sub_item}}
          </div>
    </div>
</div>

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;
        }
    }
});

代码就这么多,主要是数据准备上以及获取上要下点功夫,还有很多需要优化的地方,骚年们加油吧,在这里我就给你们喊: output_1536301131.gif

效果图

image

后话

最近产出有点多,希望能对大家有所帮助 9150e4e5ly1fmlapax9n4g206o06o74e.gif

好了,要被老板拖过去搬砖了,下次见,有空点点github嘛。 output_1536301192.gif

这是我的github,欢迎大佬们猛戳,不定时更新

暂无回复。
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册