在跨端开发中，离不开一些吸顶的交互场景，可以参考淘宝或是京东类电商 app 中一些 tab ，在整个容器滑动的过程中，吸顶效果非常的连贯和丝滑的，当然这些 tab 可能是用 native 开发的，但是跨端应用也能实现很不错的吸顶效果，那么今天我们就来研究一下跨端开发是如何实现吸顶的。
在onReady方法中，查询section-header节点并拿到该节点此时距离当前顶部的距离
内容来源：2018 年 6 月 30 日，饿了么前端主管向勇在“饿了么技术沙龙・第27弹 【前端专场】”进行《h5渲染性能一瞥》演讲分享。IT 大咖说（微信id：itdakashuo）作为独家视频合作方，经主办方和讲者审阅授权发布。
一般返回顶部都是直接用 JS 实现的，但是我不懂 JS ，写个 console.log 我都不会就不用说写返回顶部了。那就直接用回最原始的方法：锚点定位。 锚点定位其实很好用，但主要是太生硬了，点一下定位就瞬间冲过去了，没有任何过渡。很多人用JS来做返回顶部而不用 CSS 可能就是锚点定位的这个缺点。
学习原生js的人一定会接触到client家族、scroll家族和offset家族。其中clienHeight、scrollHeight和offsetHeight一般用来求网页内容的高度，而对应的clientWidth、scrollWidth和offsetWidth则用来求网页内容的宽度，由于width和Height属性是类似的，所以这里我只挑这三个height来讲一下。
我入职第二家公司接到的第一个需求就是修复之前外包做的滚动吸顶效果。我当时很纳闷为何一个滚动吸顶会有 bug，后来我查看代码才发现直接用的是 offsetTop 这个属性，而且并没有做兼容性处理。
关注 JS 太久，会养成任何功能都用 JS 实现的习惯，而忘记了 HTML 与 CSS 也具备一定的功能特征。其实有些功能用 JS 实现吃力不讨好，我们要综合使用技术工具，而不是只依赖 JS。
作者：一半水一半冰 原文：http://www.cnblogs.com/jingh/p/6377736.html 1写在前面 最近总结下之前的工作，才恍然发现时间的流逝永远是悄无声息的，离开学校那座象牙塔已经也有大半年的时间了，生活中不再充满了茫然只有忙碌。 连续加班加点大半个月，做的活动项目终于算是告一段落了，而今天也将是考验其真正价值的时候，现在将这次开发中遇到的问题做一下总结。 2项目背景 这次的项目主要是做一次全国酒店人气排名的营销活动，主要是基于在微信中传播。 预计访问量达到亿级，并发做到2000
minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" 阻止用户手滑发大缩小页面
节流指的都是某个函数在一定时间间隔内只执行第一次回调。举个常见的节流案例：我们把某个表单的提交按钮——button 设成每三秒内最多执行一次 click 响应；当你首次点击后，函数会无视之后三秒的所有响应；三秒结束后，button 又恢复正常 click 响应功能，以此类推。
图片懒加载是一个很重要的前端性能优化手段。这篇文章将从懒加载的最简单场景开始介绍，逐步增加复杂度，希望能讲清楚常见的图片懒加载场景及在该场景下对应的解决办法，也希望对你有所帮助。
https://www.lodashjs.com/docs/lodash.throttle
在 H5 中，我们通常会使用 REM 和 VW 这两种单位来实现页面的响应式布局。这两种单位可以让页面元素的大小随着根元素（对于 REM）或视口宽度（对于 VW）的大小变化而变化，从而适应不同尺寸的屏幕。
你还在用rem弹性布局吗？在html文件头部放入一大段压缩过的js代码，是不是让你很难受？来了解下vw吧，能让你的代码更纯粹。
为什么要做性能优化？性能优化到底有多重要？ 网站的性能优化对于用户的留存率、转化率有很大的影响，所以对于前端开发来说性能优化能力也是重要的考察点。
这个动画还是挺有意思的，但是小编第一个反应这要是哪一天某位ui姐姐或产品姐姐给小编提了这样子的需求，那小编岂不是当场要自闭？我本着自己的好奇心，实现了一个简易版的老虎机:
当我们浏览页面篇幅较大，浏览过半的时候想回到导航位置，只能通过往回滚动或通过”回到顶部”重新滚动到导航位置，这样的操作显得繁琐与不便。于是便有了吸顶式导航的交互方式，吸顶条导航最大的好处是将最常用或者设计者最愿意让用户看到的内容、功能经常保持在用户面前，为用户提供了极大的便利与交互体验。 本文主要内容 1、吸顶导航是什么 2、吸顶导航的实现方法 3、小结 1、吸顶条导航是什么 如图： 吸顶导航栏的初始位置一般是靠近在页面的顶部位置，但是又存在一定距离，通常这块区域放置最为醒目或者重要元素的地方，如
吸顶元素的初始位置一般靠近页面顶部，但与顶部有一定距离，这块区域放的是最醒目的元素，比如Banner图。页面向下滚动超过吸顶元素初始位置时，把吸顶元素固定在顶部
浏览器对象模型BOM（Browser，Object，Model）是以window对象为基础的，这个对象代表了浏览器窗口，页面可视区域，它还被复用为Es的全局对象Global，所有的原生类型的构造函数和函数都从一开始就存在于这个对象之上。
因为我们的首页是个公共的组件，点击首页，会员管理，都不会变，所以我们可以放在一个单独文件夹里面。
说什么真理无穷，进一寸有一寸的欢喜。大家好，我是石桥码农，今天继续为大家分享微信小程序实践相关的技术内容。
这套工具集中的大部分你可能见过，也可能没见过，如果有哪个/些让你眼前一亮，那么我的分享就很值了。 这个列表包含许多种类的资源，所以这里我将它们分组整理。 Javascript 库 📷 Particles.js — 一个用来在 web 中创建炫酷的浮动粒子的库 Three.js — 一个用来在 web 中创建 3d 物体和 3d 空间的库 Fullpage.js— 快速实现全屏滚动特性 Typed.js — 打字机效果 Waypoints.js — 滚动到某个元素位置时触发一个功能 Highlight.js
现在 web 设计是最有趣的了，做好 web 设计不仅要熟练使用 Javascript，css 和 html 等，还要有自己的创意设计。为了方便大家发挥自己的创意，就产生了很多 JS 框架，Node.js 扩展等等。有了这些工具，开发者们就能专注于创意设计了，而不用为某个功能而花费太多精力。这里我们介绍的是 12 个开发者们必备的 JavaScript 库，都是一些很基础功能很强大的库。有了这些库，开发者们可以节省很多时间，大大提高开发的效率，所以大家赶紧收藏起来吧：） 1) Headroom.js H
所谓“内滚动布局”，顾名思义就是主滚动条在页面内部的布局，是相对于传统的<html>滚动而言的，例如，下图所示滚动条，是从头部下方开始：
position:sticky定义， eg:CSS中position属性介绍(新增sticky)
EasyDSS平台支持视频直播和点播，视频直播方面最多可分为十六屏进行实时直播，视频点播方面则有视频点播广场自由点播。大家知道近期我们将EasyDSS替换了新的内核，因此在性能上，相较以前的版本性能会有一定幅度的提升，目前我们正在对新内核的EasyDSS做前端编译和测试。
一、什么是内滚动布局？ 所谓“内滚动布局”，顾名思义就是主滚动条在页面内部的布局，是相对于传统的<html>滚动而言的，例如，下图所示滚动条，是从头部下方开始： 传统的页面滚动，基本上是相对于整个浏览
携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第11天，点击查看活动详情 >>
一、什么是内滚动布局？ 所谓“内滚动布局”，顾名思义就是主滚动条在页面内部的布局，是相对于传统的<html>滚动而言的，例如，下图所示滚动条，是从头部下方开始： 传统的页面滚动，基本上是相对于整个浏览器窗体，例如，QQ视频首页： 二、为什么会有内滚动布局？ 随着显示器设备越大越宽越密，以及现代web技术的发展。web站点已经开始有了从传统的瀑布式网页向类桌面软件风格站点转变的趋势。比方说，QQ音乐的首页目前是这样子的： 以后可能就会变成这样子： “纳尼，这不就是现在的QQ音乐软件界面截图？”
client翻译过来就是客户端,我们使用client系列的相关属性来获取元素可视区的相关信息。通过client系列 的相关属性可以动态的得到该元素的边框大小、元素大小等。
offset 翻译过来就是偏移量， 我们使用 offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。
在日常工作中难免会遇到一些滚动事件的应用，页面滚动到一定位置显示 返回顶部 按钮，header 头部 fixed 固定等，这时候就可以使用 scroll() 方法来实现我们的需求。
最近在node中使用?.可选链运算符， 报错了，(Obj层级深时，避免多层if判断) 查了了一下是因为node的版本号太低了（12.18.2），需要升级到14以上才能使用可选链运算符 那如果不想升级n
本文偏技术，可能较枯燥，阅读完大概需要 15分钟 微信小程序转眼上线将近一年了，提供了接近原生App的使用体验，加上一年来不断释放新的能力，获得的关注越来越多。笔者参与到了小程序产品相关的研发工作，感觉对于结构较为复杂的小程序，性能问题还是蛮突出的。 性能优化是一个长久的课题，今天总结了一些在研发过程中的优化策略，有代码层面的，也有一些方案策略层面的，其中一些优化方法也适用于app和web，有些则只适用于小程序。今日抛砖引玉，与各位分享小程序性能优化的36计。 瞒天过海 用户对小程序速度的第一感知就
Vue 被一个健康的插件和包的生态系统所加强，使开发变得可靠、快速和简单。由于Vue 是一个国际开发者社区所选择的框架，所以有一个不断增长的插件和包库，你可以在项目中使用。
为什么要写这个文章呢？其实发现很多同学对一些很简单又有效的 debug 手段都不太了解，找 bug 的方式都不是很高效，导致最终 bug 找不到或者走了很多弯路。
最近某客户做实施，顺便完善一下程序。突然找到了一个老问题的解决方法。 就是当用户按一个按钮后，希望回发后的页面滚到一个指定的位置，而不是页面的开头部分。以前看过一篇文章介绍了一种方法，当时也没有理解，也没有记录下来，现在又遇到了这个问题，还是自己想一个简单点的方法吧。 博克园里的“最新评论”里的链接，点击后打开的页面会直接滚动到指定的评论而不是帖子一开始的位置。 那么就用这种方法了，看了一下HTML代码，发现有这一类的标签 <a id="a001" href="#001" name="
1.这个页面的构成是头部（搜索）、中间列表部分（通讯录列表展示）、顶部（tab栏）三部分组成 在写x-phone组件的时候，我把头部也算进去了，但是这种做法是错误的，写组件的时候就写一个单独的组件就好了，不要把其他的组件一起绑在一起，切记这个错误。 2.页面的组装类命名，例如头部的命名规范class="address-book-header"以及其他的，都有按照这个规范来的，这样子写让人易懂明了，以后要多多注意。 3.页面的滚动样式设置，是中间那坨滚动。我记得在第一次做的时候，整个页面都会拉动，因为我把头部组件和中间的写在一坨上了，正确的就是以上的写法。 4.在中间列表部分显示部分，我没有考虑有数据显示和无数据的情况，按照上面的写法是外面一个大view，中间是几种情况的template，这在以后的小程序都是很有必要的，也是必须要考虑进去的，这是自己一个不完善的点。
在移动端如果使用局部滚动，意思就是我们的滚动在一个固定宽高的div内触发，将该div设置成overflow:scroll/auto;来形成div内部的滚动，这时我们监听div的onscroll发现触发的时机区分android和ios两种情况，具体可以看下面表格:
由于互联网的飞速发展，传统安防摄像头的视频监控直播与互联网直播相结合是大势所趋。传统安防的直播大多在一个局域网内，在播放的客户端上也是有所限制，一般都需要OCX Web插件进行直播。
Vue 被一个健康的插件和包的生态系统所加强，使开发变得可靠、快速和简单。由于Vue 是一个国际开发者社区所选择的框架，所以有一个不断增长的插件和包库，你可以在项目中使用。本文列举了用于Vue 2和Vue 3的 15个 流行的 Vue 插件。
最近在研究页面渲染及web动画的性能问题，以及拜读《CSS SECRET》（CSS揭秘）这本大作。 本文主要想谈谈页面优化之滚动优化。 主要内容包括了为何需要优化滚动事件，滚动与页面渲染的关系，节流与防抖，pointer-events:none 优化滚动。因为本文涉及了很多很多基础，可以对照上面的知识点，选择性跳到相应地方阅读。 滚动优化的由来 滚动优化其实也不仅仅指滚动（scroll 事件），还包括了例如 resize 这类会频繁触发的事件。简单的看看： var i = 0; window.addEv
一个页面，我们通过 jquery-fullpage 插件来制作，整个是全屏滚动的。但是，我们希望在最后一页增加一个版权，大概只有 100px 高，而不需要一个全屏来放版权。怎么做呢？搜索了一下，说了各种方法。什么修改源码啦之类的，或者自己写代码判断啦。晕死。其实，官方给出了解决方案。
注意：方法二和方法三必须设置宽和高，高必须固定，设置auto会出现页面显示不完整的情况。（亲测方法三会出现滚动条）
window.resizeBy(XX[px]，YY[px]);——窗口尺寸变化的单位为：±XX，±YY （单位/px）； window.resizeTo(XX[px]，YY[px]);——窗口尺寸变换为：XX,YY（单位/px）； window.scrollBy(XX[px]，YY[px]);——屏幕滚动的单位为：±XX，±YY （单位/px）； window.scrollToo(XX[px]，YY[px]);———屏幕滚动到数据位置：XX,YY（单位/px）； object.onscroll()；onscroll事件：元素滚动时执行..； document.Element.scrollTop||document.body.scrollTop;回顶；
width: 1000px; //或 max-width: 1000px; margin-left: auto; margin-right: auto; 演示地址范例
MDL的布局/Layout组件用来作为整个页面其他元素的容器，可以自动适应不同的浏览器、 屏幕尺寸和设备。
领取专属 10元无门槛券
手把手带您无忧上云
