热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

通讯录式的吸顶结果

通讯录式的吸顶结果,当前bar牢固在顶部要领一:js监听onscroll事宜完成道理吸顶的谁人bar实际上是一个定位在屏幕最上的一个元素,把下面各个区块的高度累加放到一个数组里[0

通讯录式的吸顶结果,当前bar牢固在顶部

《通讯录式的吸顶结果》

要领一: js 监听 onscroll 事宜
  • 完成道理
  1. 吸顶的谁人 bar 实际上是一个定位在屏幕最上的一个元素,把下面 各个区块的高度累加放到一个数组里 [0, 740, 990, 1310, ...]
  2. 拿当前转动体滚过的距拜别上面的数组里找对应的区间,然后将 bar 的笔墨添补进去
  3. 拿地点区间的 上限值 - 转动值 = 偏移量
  4. var fixedTop = (diff > 0 && diff <40) ? diff - 40 : 0
  5. 依据上面 fixedTop 设置偏移量 fixedDom.style.transform = translate3d(0, ${fixedTop}px, 0)
  • 详细代码以下


















猎取转动体滚过的间隔 参考链接

const el = document.scrollingElement || document.documentElement
const top = el.scrollTop

  • 题目以下
  1. 在混淆形式下,由于一切浏览器均运用 document.body.scrollTop 猎取页面的垂直转动条的位置,所以不会涌现兼容性题目。
    而在规范形式下,由于 Chrome 与 Safari 依然运用 document.body.scrollTop,而关于 document.documentElement.scrollTop 返回为 0。
  2. 趁便再说说 document.scrollingElement 这个属性。多是浏览器厂商们也以为如今的页面转动元素太乱,一会儿 BODY 一会儿 HTML,跟页面形式有关,还跟 Webkit 的遗留 BUG 有关,因而搞出来这么个东西。依据 MDN 的引见:
  3. Document 的 scrollingElement 是一个只读属性,一直指向页面转动元素

各个区块的高度盘算 参考文章

var listGroup = $cls('.list-group-item')
let height = 0
this.listHeight.push(height)
listGroup.forEach(item => {
height += item.clientHeight
this.listHeight.push(height)
})

  • clientHeight、offsetHeight、scrollHeight、scrollTop、offsetTop 的区分
  1. clientHeight和offsetHeight属性和元素的转动、位置没有关系它代表元素的高度,个中:
    clientHeight:包含padding但不包含border、程度转动条、margin的元素的高度。关于inline的元素这个属性一直是0,单元px,只读元素。

    offsetHeight:包含padding、border、程度转动条,但不包含margin的元素的高度。关于inline的元素这个属性一直是0,单元px,只读元素。

  2. scrollHeight
    scrollHeight: 由于子元素比父元素高,父元素不想被子元素撑的一样高就显现出了转动条,
    在转动的过程当中本元素有部份被隐蔽了,scrollHeight代表包含当前不可见部份的元素的高度。

    而可见部份的高度实在就是clientHeight,也就是scrollHeight>=clientHeight恒建立。

    在有转动条时议论scrollHeight才有意义,在没有转动条时scrollHeight==clientHeight恒建立。单元px,只读元素

  3. scrollTop: 代表在有转动条时,转动条向下转动的间隔也就是元素顶部被遮住部份的高度。在没有转动条时scrollTop==0恒建立。单元px,可读可设置。
  4. offsetTop: 当前元素顶部间隔近来父元素顶部的间隔,和有无转动条没有关系。单元px,只读元素。

2019-07-09 更新

要领二:position: sticky

sticky: 粘性规划,基本上,能够看做是 position: relative 和 position: fixed 的结合体 ——当元素在屏幕内,表现为 relative ,就要滚出显现器屏幕的时刻,表现为 fixed

对元素设置:
position: -webkit-sticky;
position: sticky;
top: 0; // 摆布也能够设置 left

  • 上栗的吸顶结果能够用 sitcky 完成

// 将上述代码改成 以下即可,注重其先人元素不可有 overflow: visible 之外的元素
.list-group-title {
postion: sticky;
top: 0;
}

  • 注重事项:

    1. 父级元素不能有任何 overflow: visible 之外的设置,不然就没有粘滞结果
    2. 父级元素不能设置牢固的 hight 高度值
    3. 同一个父容器中的 sticky 元素,假如定位值雷同,则会堆叠;假如属于不同父元素,则会鸠占鹊巢,挤开本来的元素,顺次构成占位结果。(吸顶结果)
    4. sticky 定位,不仅能够设置 top,基于 转动容器上边缘定位;还能够设置bottom,left,right
  • sticky 参考张鑫旭大佬的文章 sticky

推荐阅读
  • Web开发框架概览:Java与JavaScript技术及框架综述
    Web开发涉及服务器端和客户端的协同工作。在服务器端,Java是一种优秀的编程语言,适用于构建各种功能模块,如通过Servlet实现特定服务。客户端则主要依赖HTML进行内容展示,同时借助JavaScript增强交互性和动态效果。此外,现代Web开发还广泛使用各种框架和库,如Spring Boot、React和Vue.js,以提高开发效率和应用性能。 ... [详细]
  • 字符串学习时间:1.5W(“W”周,下同)知识点checkliststrlen()函数的返回值是什么类型的?字 ... [详细]
  • javascript分页类支持页码格式
    前端时间因为项目需要,要对一个产品下所有的附属图片进行分页显示,没考虑ajax一张张请求,所以干脆一次性全部把图片out,然 ... [详细]
  • 技术分享:使用 Flask、AngularJS 和 Jinja2 构建高效前后端交互系统
    技术分享:使用 Flask、AngularJS 和 Jinja2 构建高效前后端交互系统 ... [详细]
  • 深入解析:Synchronized 关键字在 Java 中对 int 和 Integer 对象的作用与影响
    深入探讨了 `Synchronized` 关键字在 Java 中对 `int` 和 `Integer` 对象的影响。尽管初看此题似乎简单,但其实质在于理解对象的概念。根据《Java编程思想》第二章的观点,一切皆为对象。本文详细分析了 `Synchronized` 关键字在不同数据类型上的作用机制,特别是对基本数据类型 `int` 和包装类 `Integer` 的区别处理,帮助读者深入理解 Java 中的同步机制及其在多线程环境中的应用。 ... [详细]
  • 在HTML布局中,即使将 `top: 0%` 和 `left: 0%` 设置为元素的定位属性,浏览器中仍然会出现空白填充。这个问题通常与默认的浏览器样式、盒模型或父元素的定位方式有关。为了消除这些空白,可以考虑重置浏览器的默认样式,确保父元素的定位方式正确,并检查是否有其他CSS规则影响了元素的位置。 ... [详细]
  • 为了确保iOS应用能够安全地访问网站数据,本文介绍了如何在Nginx服务器上轻松配置CertBot以实现SSL证书的自动化管理。通过这一过程,可以确保应用始终使用HTTPS协议,从而提升数据传输的安全性和可靠性。文章详细阐述了配置步骤和常见问题的解决方法,帮助读者快速上手并成功部署SSL证书。 ... [详细]
  • Python 伦理黑客技术:深入探讨后门攻击(第三部分)
    在《Python 伦理黑客技术:深入探讨后门攻击(第三部分)》中,作者详细分析了后门攻击中的Socket问题。由于TCP协议基于流,难以确定消息批次的结束点,这给后门攻击的实现带来了挑战。为了解决这一问题,文章提出了一系列有效的技术方案,包括使用特定的分隔符和长度前缀,以确保数据包的准确传输和解析。这些方法不仅提高了攻击的隐蔽性和可靠性,还为安全研究人员提供了宝贵的参考。 ... [详细]
  • 本文详细介绍了如何利用CSS技术对链接下划线进行个性化定制和美化,涵盖了多种实用技巧和方法。通过对CSS属性的灵活运用,可以实现不同风格的下划线效果,提升网页的视觉体验。文中不仅提供了基础的代码示例,还结合实际案例进行了深入解析,帮助读者更好地理解和应用这些技巧。此外,文章还引用了《CSS2.0中文手册》中的相关内容,增加了技术的权威性和实用性。 ... [详细]
  • 为开发者提供了一系列实用的参考网站和资源链接,包括HTML速查手册( 和 ),帮助开发者快速查找和学习相关技术知识。此外,还涵盖了其他重要的开发工具和文档,为编程工作提供全面支持。 ... [详细]
  • 本文全面解析了JavaScript中的DOM操作,并提供了详细的实践指南。DOM节点(Node)通常代表一个标签、文本或HTML属性,每个节点都具有一个nodeType属性,用于标识其类型。文章深入探讨了DOM节点的创建、查询、修改和删除等操作,结合实际案例,帮助读者更好地理解和掌握DOM编程技术。 ... [详细]
  • 本文详细介绍了使用 Python 进行 MySQL 和 Redis 数据库操作的实战技巧。首先,针对 MySQL 数据库,通过 `pymysql` 模块展示了如何连接和操作数据库,包括建立连接、执行查询和更新等常见操作。接着,文章深入探讨了 Redis 的基本命令和高级功能,如键值存储、列表操作和事务处理。此外,还提供了多个实际案例,帮助读者更好地理解和应用这些技术。 ... [详细]
  • 使用 `git stash` 可以将当前未提交的修改保存到一个临时存储区,以便在后续恢复工作目录时使用。例如,在处理中间状态时,可以通过 `git stash` 命令将当前的所有未提交更改推送到一个新的储藏中,从而保持工作目录的整洁。此外,本文还将详细介绍如何解决 `git stash pop` 时可能出现的冲突问题,帮助用户高效地管理代码变更。 ... [详细]
  • Mr.J 的 jQuery 学习笔记:第三十一讲——深入解析事件操作(on/off)方法
    `on()` 方法用于在选定元素及其子元素上绑定一个或多个事件处理程序。从 jQuery 1.7 版本开始,`on()` 方法取代了 `bind()`、`delegate()` 和 `live()` 方法,成为统一的事件绑定方式。该方法不仅支持直接绑定事件,还支持事件委托,使得事件处理更加灵活和高效。通过 `off()` 方法,可以移除之前使用 `on()` 绑定的事件处理程序,从而实现对事件的动态管理。 ... [详细]
  • JavaScript XML操作实用工具类:XmlUtilsJS技巧与应用 ... [详细]
author-avatar
A布匹rray
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有