Сдвиньте голову, чтобы исправить это, почему вы тоже этого не понимаете?

внешний интерфейс GitHub Google SCSS

предисловие

В компании в последнее время было относительно мало вещей.Буквально утром кто-то спросил меня как реализовать скольжение и прилипание к голове.Я долго думал об этом.Я просто написал это несколько дней назад,так что я будет записывать его. Итак, моя девушка дала мне фотографию

подбрасывать идеи

На самом деле идея довольно проста, следите за временем прокрутки контейнера div, и высоту каждого нужно зафиксировать, сдвиньте на эту соответствующую высоту и зафиксируйте ее. Это может быть немного общим, давайте поговорим о коде.
Сегодня вставляем код из базового режима в стиле шаблон-скрипт

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"
               @click="setLocation(sub_item)">
               {{sub_item}}
          </div>
    </div>
</div>

style

Затем идет часть css, где используется метод написания scss, что это такое, Baidu или Google, перечислены только соответствующие стили, а остальное опущено с...

.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, когда у вас будет время.

Это мой гитхаб, вы можете время от времени тыкать и обновлять

Категории