滑动头部固定，要不也了解下？

Object 发布于2019-08-23 11:54 / 3197人阅读

摘要：前言最近公司事情比较少，正好早上有人问我那个滑动粘着头部不动的怎么实现，我想了半天，前几天刚刚写过，那就记录一下咯。

前言

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

抛思路

其实思路还蛮简单的，监听容器div的滚动时间，及每个需要fixed的高度，滑到这个对应高度了，fixed住就行了。可能有点笼统，我们结合代码说吧。
今天我们从基本的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，欢迎大佬们猛戳，不定时更新

GPU云服务器云服务器 js实现头部滑动渐变备案域名要不回没有域名要不要备案备案要不要绑定域名

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97656.html

如何使用数组实现滑动窗口

摘要：理解数组实现的滑动窗口，看下边这个图就可以了。第秒，开始计数，此时数组内开始存入计数周期，保存在数组第个位置，表示这是当前滑动窗口内的第个计数周期。在FireflySoft.RateLimit之前的版本中，进程内滑动窗口的实现是基于MemoryCache做的，虽然能够正确的实现滑动窗口的算法逻辑，但是性能比较差，其吞吐量只有其它算法的1/4。性能为何如此之差呢？滑动窗口的原理我们先来看下滑动...

不知名网友 2021-11-29 10:50 评论0 收藏0
Android智能下拉刷新框架-SmartRefreshLayout

摘要：框架下拉刷新控件还能框架化智能又怎么回事二话不多少先上效果图，咱们再来探个究竟。下面通过自定义和嵌套作为内容来解释的智能之处。可以看到在列表已经滚动到中部时，轻微下拉列表是不会触发刷新的，但是如果是触摸固定的布局，则可以触发下拉。框架？下拉刷新控件还能框架化？智能又怎么回事？二话不多少先上Demo效果图，咱们再来探个究竟。 Github 传送门注意：本文仅仅是博客文章，主要用于项目介...

MadPecker 2019-08-15 10:42 评论0 收藏0
禁止蒙层底部页面跟随滚动

摘要：但是，在蒙层元素中滑动的时候，滑到内容的尽头时，再继续滑动，蒙层底部的页面会开始滚动，显然这不是我们想要的效果，因此需要阻止这种行为。部分安卓机型以及中，无法无法阻止底部页面滚动。为蒙层容器节点简单粗暴，滚动时底部页面也无法动弹了。场景概述弹窗是一种常见的交互方式，而蒙层是弹窗必不可少的元素，用于隔断页面与弹窗区块，暂时阻断页面的交互。但是，在蒙层元素中滑动的时候，滑到内容的尽头时...

shiyang6017 2019-08-02 15:59 评论0 收藏0