位置: 编程技术 - 正文

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

编辑:rootadmin

推荐整理分享使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法(stick function),希望有所帮助,仅作参考,欢迎阅读内容。

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

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

在这篇文章Sticky组件的改进实现提供了一个改进版的sticky组件,并将演示效果应用到了自己的博客。有了类似sticky的这种简单组件,我们就可以在利用它开发更丰富的效果,比如本文要介绍的tab导航和滚动导航。实现简单,演示效果如下:

tab导航(对应tab-sticky.html):

滚动导航(对应nav-scroll-sticky.html):

1. tab导航的实现

tab导航的需求是:在点击导航项的时候,除了切换tab内容,还要控制滚动,将要显示的tab内容置顶,并且要刚好显示在sticky元素的下边。由于demo是用bootstrap做的,bootstrap提供的tab组件非常简单好用,我们可以在tab组件提供的shown.bs.tab的事件回调里做滚动控制处理,所以这个效果实现起来比较容易:

html结构:

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

2. 滚动导航实现

滚动导航相对麻烦一些,tab组件里面,只会显示与当前激活的tab项对应的tab内容,而滚动导航里面,要导航的所有内容都是已经在页面中渲染完毕的,它的需求是:

1)点击导航项的时候,控制页面滚动,自动将与点击的导航项对应的内容置顶显示,并且要刚好显示在sticky元素的下边;

2)页面滚动的时候,根据当前显示的导航内容自动给相应的导航项添加active样式。

尽管听起来复杂,但是demo中的实现还是比较容易:

html结构:

3. 总结

本文结合sticky组件,提供了2种导航效果实现,兼容IE9+,firefox以及chrome,感兴趣可以下载源码再去详细了解。在实现tab导航的时候,因为有bs的tab组件所以实现起来非常容易,也没有必要把sticky跟tab组件再封装起来形成一个新组件,毕竟效果的实现代码已经比较简单了。在实现滚动导航的时候,因为没有用tab组件,所以滚动导航的那两个需求点都是单独实现的,在实际情况中,这两个功能可以封装成2个独立的组件或者1个组件,这样就能把实现代码写的像tab导航那样简单,不过本文没有再深入去介绍这两个组件的写法,因为这不是本文主要想介绍的内容,虽然我很想这么做,后续肯定会再写博客来介绍这两个组件,简单的东西不造一下轮子,简直是浪费机会。在实现这两个效果的时候,也有2点收获:

1)firefox以及IE,先让网页,然后再刷新,虽然网页还会显示在刷新的位置,但是不会触发scroll事件,所以今后做scroll相关的组件,一定在组件初始化的时候主动掉一次scroll相关的回调;

2)getBoundingClientRect返回的rect对象相关的值,在IE和firefox下,都可能是小数,比如.,这样的数,在进行判断的时候可能会跟预期情况不符,导致一些意外的BUG,如果不是特别严谨的话,可以用Math.floor对这些值进行取整,然后再用来计算或者判断。比如滚动导航实现中,rect.top的值.,offsetTop的值是,期望是curRect.top <= offsetTop这个条件能够成立,因为小数的原因,所以它不成立。

浅谈Sticky组件的改进实现 在上一篇文章使用getBoundingClientRect方法实现简洁的sticky组件的方法介绍了一个sticky组件的简洁实现,经过这两天的思考,发现上次提供的实现还有较多

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

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

标签: stick function

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

上一篇:关于JS中match() 和 exec() 返回值和属性的测试(js str.match)

下一篇:浅谈Sticky组件的改进实现(sticky memo widget)

  • 跨年发票入账账务处理
  • 关联方的借款用什么科目核算
  • 海关进口增值税专用缴款书图片
  • 适用综合所得税率表
  • 怎么把销项税额进项税额给转掉
  • 小规模纳税人征税规定
  • 固定资产可以一次性摊销吗
  • 不征税收入和免税收入所对应的成本与费用能否税前扣除
  • 更正申报后可以作废吗
  • 土地增值税清算的条件
  • 外企当年利润能赚多少
  • 公允价值变动损益和投资收益区别
  • 资本公积在现金流量表哪里体现
  • 应收账款管理应该从哪些方面进行
  • 即征即退和一般项目进项税比例怎样算出进项税额
  • 车辆保险代交车船使用税会计分录怎么写?
  • 企业什么税可以退
  • 买车交税怎么算价格
  • 如何下载金三系统的客户端插件?
  • 资源税如何进行账务处理
  • 增值税发票发票号
  • 递延所得税资产是什么
  • 收不回工程款的心情
  • 电梯维保公司缴税标准
  • 删除打印机如何添加
  • 来电转接怎么设置空号
  • php创建二维数组
  • 备用金冲销的会计分录
  • 增值税进项税转出什么意思
  • regsync.exe - regsync是什么进程 有什么用
  • 判断企业存货过多的判断方法
  • php require的用法
  • 意外保险费是什么意思
  • 贷款利息如何计算年利率
  • 木鱼的电脑
  • nodejs安装及环境配置win10
  • 房地产预缴所得税怎么算
  • 发票已开,款未到的会计分录
  • websocket tcpsocket
  • openai 入门
  • 刷题笔贴吧
  • 境外出差
  • 判断文件是否存在,存在则删除
  • 事业单位回复短信里的加号要吗
  • 苹果cms仿站教程
  • 房屋租赁交的定金可以退吗
  • 固定资产入账原值含税价吗
  • 使用sql server查询不到会返回什么
  • 场地无偿使用证明的作用是什么
  • 什么是异地企业
  • 车辆维修费会计分录
  • 企业汇算清缴中的职工薪酬指的是管理费用中的吗
  • 应收款项减值讲解视频
  • 租的办公室装修费怎么处理
  • 拍卖土地支付的法律依据
  • 库存商品怎么做表格
  • 带息票据与不带息票据
  • 公司申请土地建厂房
  • 公司买支票需要带什么资料
  • safari 快捷键
  • fedora29
  • fedora s9
  • win造字软件
  • Win8.1如何能将任意文件隐藏到普通图片中例如JPG图片
  • webtrapnt.exe - webtrapnt进程是什么意思
  • win7怎么连接其他电脑共享的打印机
  • exgear是什么
  • WIN7系统怎么安装 注音输入法
  • windows10用法
  • win7系统无法安装
  • linux安装步骤
  • wire软件下载
  • 设置ip安全策略
  • shell脚本随机数
  • python遍历列表判断相同元素
  • unity3d如何发布ios教程
  • jquery weui
  • jquery页面布局
  • 济南税务局投诉电话多少
  • 教育费附加申报表
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设