位置: 编程技术 - 正文

浅谈Sticky组件的改进实现(sticky memo widget)

编辑:rootadmin

推荐整理分享浅谈Sticky组件的改进实现(sticky memo widget),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:stick应用,stick stack,sticky memo widget,stick stack,sticky模块,stick options,stick options,sticky memo widget,内容如对您有帮助,希望把文章链接给更多的朋友!

在上一篇文章使用getBoundingClientRect方法实现简洁的sticky组件的方法介绍了一个sticky组件的简洁实现,经过这两天的思考,发现上次提供的实现还有较多不足的地方,另外跟别的网站上实现的效果在取消固定的时候也有一些不同,上次提供的取消固定的处理方式不好,本文在上文的基础上,提供一个改进版的sticky组件,功能更加完善,希望您有兴趣阅读。

1. 旧版本的问题

上一个sticky组件的实现中,有多个问题存在:

第一,从sticky的效果上来说,sticky元素在固定前后,不会变化的是相对浏览器左边的位置以及sticky元素的整体宽度,可能会变化的是相对浏览器顶部或底部的位置和sticky元素的高度,而上文提供的实现中把后面两个会变化的值都当成了不变的值。为什么在固定的时候top值或bottom值就一定是0?当然可以不是0阿,比如top: px,bottom: px,在某些场景里,加上一些这样的偏移,sticky的效果会更好看,比如bootstrap官方文档中用到的affix组件实例(这个组件的功能跟本文实现的sticky组件是差不多的):

它就把固定的时候,相对浏览器顶部的位置设置成了top: px。sticky元素的高度也是,为了在固定的时候显示更好看的效果,调整原来的Line-height或者padding-top等更高度有关的属性,也是非常常见的需求,比如天猫花呗的这个页面,这块内容就用到了sticky组件:

固定前,sticky元素的高度是:

固定后,sticky元素的高度是:

第二,在取消固定的时候,以sticky元素固定在顶部为例,上文提供的实现是在target元素跟浏览器顶部的距离小于stickyHeight的时候,就直接取消sticky元素的position: fixed属性,sticky元素立马被还原到普通文档流中,效果是:

它是在临界点的时候立马就消失的,而天猫花呗的那个效果就不是这样:

它在临界点的时候并不是立即消失,而是重新去调整sticky元素的top值,让它配合着滚动条一起跟随网页主体内容一起向上滚动:

从体验上来说,显然天猫花呗的这个效果更好一点,从功能上来说,上文提供的实现有一个致命的缺点:就是当sticky元素的高度非常大,超出了浏览器可视区域的高度的时候,会出现不管你怎么滚动,都无法浏览全sticky元素所有内容的BUG,有兴趣的可以拿上次实现的代码在自己博客的侧边栏上试一试。我试过发现了这个问题,所以才想要改进sticky组件:(第三,上次的实现还有几处不足的地方:

1)documentElement.clientHeight没有做缓存,导致每次判断临界点时都要去重新获取:

浅谈Sticky组件的改进实现(sticky memo widget)

2)滚动回调间隔的默认值太大,应该再设置小一点,这次用的是5,bootstrap用的是1,只有这样才能保证效果流畅;

3)有的场景可能不需要resize的时候重新设置sticky元素的宽度,应该加个选项来控制;

4)在sticky元素固定和取消固定的时候,应该提供回调函数,以便其它组件依赖这个组件的时候可以在关键点做些事情。

2. 如何改进

组件的选项重新定义了一下:

加粗的几个是新增或有修改的,去掉了原来的height,用unStickyDistance来替代。固定时候相对浏览器顶部或底部的位置,用stickyOffset来指定,这样在.sticky--in-top或.sticky--in-bottom的css里就不用再写top或bottom属性值了。isFixedWidth如果为false,才会去添加resize时刷新sticky元素宽度的回调:

本次实现相比上次,麻烦的是取消固定时的逻辑处理,上次sticky元素只有2种状态,sticky或者unsticky,这次不一样,sticky状态里面又分成了staticSticky和dynamicSticky,前者表示top或bottom值不变的sticky状态,后者表示top或bottom值会变化的sticky状态,其实后者对应的就是快要取消固定的时候那段范围,为了更清晰地解决这个问题,将原来判断临界点以及在不同临界点做不同处理的代码重构成下面这个样子:

有点状态模式的思想在里面,不过更简洁。当我写出这个代码的时候,其实是很想用之前了解的状态机来写的,我想过用状态机来写肯定是可以实现的,不过为了少引用一个类库就算了,等哪天想实践状态机的时候再来尝试一把。

整体实现如下:

难理解的可能是getState的那个方法的逻辑,这部分的一些思路在上上篇博客有比较详细的说明。

3. 博客侧边栏应用说明

首先得把本次的实现粘贴到博客设置页脚html文本域里面去,然后加入下面的代码来初始化:

使用timer是因为侧边栏的内容都是ajax加载,又不可能在这些ajax请求时候添加回调,只能通过它们返回的内容来判断侧边栏是否加载完毕。

4. 总结

这周末琢磨了下如何改进sticky组件,加上写这篇文章,花了大半天的时间,好歹现在这个sticky组件的功能跟实现能让自己有点满意的感觉了,上次写完总觉得怪怪的,好像缺点什么,原来是因为还差这么多东西。现在这个组件还只是能实现固定和取消固定的效果,对于实际工作而言,这个层级的效果可能还不够,网上常见的那种在固定的同时支持导航滚动或者tab导航的功能也很常见,下篇文章会介绍基于本文的sticky组件,如何实现navScrollSticky以及tabSticky组件,敬请关注。感谢您的阅读:)

补充说明:IE跟火狐里面,在刷新页面的时候,如果刷新前页面有滚动,刷新的操作虽然还会把页面的滚动位置设置成刷新的位置,但是不会触发scroll事件,所以必须在组件初始化之后立即调用一次sticky函数:

使用getBoundingClientRect方法实现简洁的sticky组件的方法 sticky组件,通常应用于导航条或者工具栏,当网页在某一区域滚动的时候,将导航条或工具栏这类元素固定在页面顶部或底部,方便用户快速进行这类

浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号 1C,C++,Java,PHP都能容忍末尾的逗号C,C++,Java中对数组赋值时,最后一个元素末尾的逗号可有可无。下面两行代码对这些语言来说是等效的。inta[]={1,2,3};/*

详述JavaScript实现继承的几种方式(推荐) ECMAScript只支持实现继承,而且其实现继承主要是依靠原型链来实现的。原型链原型链的基本思想是利用原型让一个引用类型继承另一个引用类型的属性

标签: sticky memo widget

本文链接地址:https://www.jiuchutong.com/biancheng/377448.html 转载请保留说明!

上一篇:使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法(stick function)

下一篇:使用getBoundingClientRect方法实现简洁的sticky组件的方法(使用筷子就餐会不会传染乙肝病毒)

  • 增值税进项税额加计抵减会计处理
  • 成本票有哪些种类
  • 跨月的增值税普票作废步骤
  • 不是公司员工可以举报公司不交社保吗
  • 速达建账套期初数据
  • 增值税上月多交税本月怎么办
  • 小规模没有计提增值税直接缴纳了
  • 报销单与发票金额不符
  • 没有外币账户可以收外币吗
  • 计提上一年度企业所得税会计分录
  • 投资收益和公允价值变动的区别
  • 汽车保险专用发票怎么做账
  • 可供出售金融资产是指什么
  • 多交税款如何处罚
  • 出售多余材料会计科目
  • 开票方没缴税咋办
  • 公司单独核算项目财务怎么处理?
  • 境外劳务输出有哪些类型
  • 单位收到增值税专用开票人写管理员
  • 企业可根据实际情况随意设置会计科目
  • 纳税总额包括
  • 增值税普通纳税人税率
  • 小微企业免征增值税条件
  • 杨志勇财政
  • 当期可抵扣进项税额包括进项转出额吗
  • 中标费用由哪方出
  • 所得税申报填写
  • 私账的钱怎么弄到公账
  • php数组函数有哪些
  • PHP:pg_get_pid()的用法_PostgreSQL函数
  • 持有至到期投资减值准备
  • 实缴资金少有什么风险
  • 简单谈谈中国法律史的感受
  • postman如何设置token
  • uniapp cover-view
  • 过桥资金账务处理
  • 融资租赁与经营租赁的联系
  • 稽查查补税款会计分录
  • pytorch如何学
  • 高速发票看不见金额怎么办
  • 专票抵扣联可以盖两个章吗
  • 物流公司挂靠会计处理
  • 汇兑损益计入什么科目
  • 深度卷积神经网络基本结构
  • php的foreach
  • 侵权赔偿补偿金如何计算
  • 专票没有抵扣联可以作废吗
  • 税前弥补以前年度亏损对递延所得税影响
  • 企业的所得税税率怎么计算
  • 小规模纳税人免税政策2023年
  • 固定资产暂停使用申请怎么写
  • 支付一年房租费怎么做账
  • 公司垫付员工社保分录
  • 农产品怎么自产自销
  • 进项税额转出的几种情况
  • 小规模纳税人做账分录全套流程最新
  • 叉车上牌流程注册登记
  • 保险由承租方还是出租方承担
  • 其他资本公积是利得吗
  • 建账有哪些步骤,每个步骤有哪些注意事项
  • mysql 5.7.34安装
  • win8系统安装软件在桌面找不到
  • win10系统如何添加隐藏wifi
  • win10无u盘装系统教程
  • 强制升级win11后果
  • windows8应用商店在哪
  • win7微软账户
  • Intermediate Unity 3D for iOS: Part 1/3
  • excle纵坐标
  • google collections
  • linux查找目录的命令
  • vue中的vuex
  • js中的函数怎么使用
  • 欢迎使用来电提醒业务是什么意思
  • unity接入安卓sdk
  • js复制对象的值
  • 住宿发票税率1%怎么回事
  • 广告费扣除限额15%和30%
  • 税控盘税务数字证书密码忘记怎么办
  • 郑州市地税局局长
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设