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

前言

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

抛思路

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

template

style

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

script

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

数据初始化
事件监听+逻辑判断

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

效果图

image

后话

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

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

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

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复