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

前言

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

抛思路

其实思路还蛮简单的,监听容器div的滚动时间,及每个需要fixed的高度,滑到这个对应高度了,fixed住就行了。可能有点笼统,我们结合代码说吧。

今天我们从基本的template-script-style模式来贴代码好了。

template

style

然后是css部分,这里用了scss的写法,具体是什么,自行百度或谷歌,其中只列出了有关的样式,剩余部分用…省略

script

重头戏来了,我们一步一步顺清楚。
1.数据初始化
2.事件监听
3.逻辑判断

数据初始化

事件监听+逻辑判断

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

效果图

后话

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

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

1 1 收藏 评论

可能感兴趣的话题



直接登录
跳到底部
返回顶部