事件对象可以拿到 pageY、clientY、offsetY，分别代表到点击的位置到文档顶部，到可视区域顶部，到触发事件的元素顶部的距离。
今天汇总整理了 JavaScript 和 jQuery 获取元素宽高和位置的方法，比较全面，方便自己和需要并搜到此文章的朋友们查看。
document.documentElement.scrollTop ==>> 非IE滚动的距离
大家好，今天我们将一起实践下如何手写固定表头，那么什么是固定表头呢？就类似 Excel 表格有个锁定表头的功能，方便用户查阅数据进行数据项的对比。虽然有不少相关插件提供了类似的功能，比如 ScrollMagic.js，但是今天的实例，我们将用纯原生的方式进行实现，当滚动条滚动至表格位置，固定表头位置，表格内容查看完后，取消固定表头的功能。
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业： 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】 🌎超炫酷的Echarts大屏可视化源码：【🔰 echarts大屏展示大数据平台可视化(150套) 】 🎁 免费且实用的WEB前端学习指南： 【📂web前端零基础到高级学习视频教程 120G干货分享】 🥇 关于作者: 历任研发工程师，
1、offsetWidth: 为元素的width+元素的padding+边框的宽度
我们在设计页面的时候，经常要把div等块级元素居中显示，而且是相对页面窗口水平和垂直方向居中显示，如让登录窗口居中显示。我们传统解决的办法是用纯CSS来让div等块级元素居中。在本文中，我将给大家讲述如何用CSS和jQuery两种方法让div等块级元素水平和垂直居中。
汉诺塔是源于印度一个古老传说的益智游戏，传说大梵天创造世界的时候顺便搞了三根柱子，一根柱子上摞着一堆从大到小的圆环，他命令婆罗门把圆环全部移动到另一个柱子上，依旧是从大到小，且移动规则如下：
如果您使用的是jQuery，则可以使用jQuery方法获取窗口或document的大小：
在测试的时候，我发现调整浏览器尺寸后，原先靠近浏览器边缘的窗口就直接被隐藏掉了，如下图：
我想，工作一段时间的都碰见过上拉加载更多需求，现在这种插件也蛮多的，也很多是把上拉加载下拉刷新结合。但是这些组件都有一个问题，就是下拉到最底部，刷新浏览器，浏览器会记住这个距离，从而触发上拉加载的方法。虽然这个小问题在正常情况下没什么影响，于是自己就研究研究，写了一个上拉加载更多的组件。
上面几种方式实现起来比较简单，但是效果生硬，直接从底部切换到顶部，没有一个过渡的动画。此方法能使页面动态滚动，同时将按钮换成一个箭头标志，判断页面滚动的距离，当页面滚动到一定的距离后再显示返回顶部箭头标志。这样的效果更佳生动。
我们先来弄清楚我们要实现的是怎样的动画效果，是走马灯吗？是弹幕吗？看着像瀑布流？我们暂且叫"走马灯"吧，接下来拆解一下要点：
https://gitee.com/ishouke/front_end_plugin/blob/master/jquery-3.2.1.min.js
onscroll：当滚动条滚动的时候触发 onresize：当窗口大小发生改变的时候触发
element.offsetTop: 返回元素距离带有定位的父元素的顶部的距离，如果所有父级元素没有则默认为浏览器的body区域； element.offsetLeft: 返回元素距离带有定位的父元素的左侧的距离，如果所有父级元素没有则默认为浏览器的body区域； element.offsetWidth: 返回元素大小，元素内容宽度 + padding值 + border值； element.offsetHeight: 返回元素大小，元素内容高度 + padding值 + border值；
本文并非原创，只是真心觉得好，特别是图解的很到位，我在js中经常会用到，就记下来，与大家分享。
Author：Mr.柳上原 付出不亚于任何的努力 愿我们所有的努力，都不会被生活辜负 不忘初心，方得始终 给大家分享一个工作中遇到的事情： 分公司人事部的电脑坏了 老总叫我们网络营销部去给分公司送电脑 去了安装好电脑后 他们说打印机坏了 让我们修 我们看了一下 不是连接问题 好像是打印机老化，硬件问题 于是跟老总说，叫个电脑维修的过来看看吧 老总表现的很不满意，说 你们要多学点东西，身为网络部的，连打印机都不会修 后来在一次员工会议上，老总又提到这件事，他说 分公司很多人对网络部不满意，觉得你们做事不靠谱，
静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。 所谓静态位置就是各个元素在HTML文档流中默认的位置。
实现一个通过触摸拖动操作来展开和收起底部悬浮框，并根据拖动过程中的位置和状态来调整底部容器的高度和展开状态的功能
这是最简单的方法，不仅能实现绝对居中同样的效果，也支持联合可变高度方式使用。内容块定义transform: translate(-50%,-50%) 必须加上
CSS 有两个最重要的基本属性，前端开发必须掌握：display 和 position。
positon定位一共有四种，分别是static静态（默认），relative相对，fixed固定，absolute绝对定位，以及sticky粘性定位。
在我本地测试当中： 在IE、FireFox、Opera下都可以使用 document.body.clientWidth document.body.clientHeight 即可获得，很简单，很方便。 而在公司项目当中： Opera仍然使用 document.body.clientWidth document.body.clientHeight 可是IE和FireFox则使用 document.documentElement.clientWidth document.documentElement.clientHeight 原来是W3C的标准在作怪啊
我们有时需要获得鼠标在某盒子中的位置，或者是随意移动某盒子的位置，在这些场景中我们可能经常需要用到clientWidth、offsetWidth、offsetTop啊等等。但是对于初学者来说（包括我），看到这些就头疼，因为感觉意思都相近，但作用却不同，所以今天天我就来捋一捋，搞清楚，后面好干活。好吧，废话不多说，开始吧。
前段时间，群里有位同学问起 Ajax 加载的问题，这个不属于模板制作系列教程的内容，因此单独再出一个使用技巧系列的教程。
在我们浏览网页的过程中，经常会发现网页中的元素重叠展示，例如一个列表压在了一张图片之上，或者浏览器右下角突然弹出的广告压到了其他元素之上，这些都需要使用css的定位才能实现，本节我们就讲解css定位相关的属性，定位可以分为三类:
案例验证的浏览器为 - Google Chrome 版本 119.0.6045.123（正式版本）（arm64）
代码不多，核心代码 200 行，感兴趣的可以戳这里：Github - broadcastAnimation[1]
要做到每一张图片都根据上面的高度自动适应排列，那么我们就不能单纯地靠html+css布局了，需要用到js来帮助计算位置（其实用CSS3也能布局）。那么计算什么呢？
代码不多，核心代码 200 行，感兴趣的可以戳这里：Github - broadcastAnimation
分享一下项目中碰到的一个多缺口滑块验证，先触发一下滑块抓包分析一下是用的哪一家滑块
（2）在ul中的最后一个li元素后添加一个新的li元素，li元素文字内容为input元素的输入值，请补全横线处代码（依次填写答案，使用中文逗号「，」隔开）
首先是昨天我们说的vue中绑定@scroll事件，别忘了加对应的高度，以及检查overflow-y：
公司这边要写一个温度的下拉框，35-42度，以0.1步进。算下来有好几十个，需求是做成下拉框可以拉动选择温度的形式。尝试了很多UI包括select，其中遇到不同的bug，作个记录。
https://www.zhihu.com/zvideo/1380450791975731200
取值：数字+px 百分比 （圆角半径）
悬浮框是什么？大家不一定清楚，但是说网站上怎么都关不完的小广告，估计人人都被它恶心过，不管你怎么滚动网页，这些小广告始终会出现在你的屏幕上。今天我们就来聊聊这些小广告背后的原理——悬浮框。
无限滚动是一个开发时经常遇到的问题，比如 ant-design 的 List 组件里就推荐使用 react-infinite-scroller 配合 List 组件一起使用。
我把Echarts中常用的标题、图例、提示框、工具栏等配置项归类到Echarts 图表的基本配置项。各个配置项主要的配置参数如下：
ECMAScript，描述了该语言的语法和基本对象，如类型、运算、流程控制、面向对象、异常等。
单选题 （共计 10 题，总计 24分） 1、(单选题)把鼠标移到按钮上时，会产生哪些事件？ A.hove click B.foucs keyup C.keydown foucus D.focus hover 【正确答案】D 【答案解析】focus -> hover 聚焦 -> 悬停
如何插入JS JS基础语法 语法、函数、方法 提取字符串substring() substring() 方法用于提取字符串中介于两个指定下标之间的字符。
在第一课里，我向您承诺过会对相机进行一些介绍，那么今天就是我履行诺言的时刻了。嘿，这一刻，有点激动，想到相机，大学时，一直想买一个单反，但是要1万多。工作后，当一个月的工资就能买一个单反时，内心充满了骄傲和自豪。所以，各位大大们，技术还是有用的，至少技术可以用来挣钱。
1、滚动前： 2、滚动中： 3、滚动超过后： 直观效果可参pc端微博左侧的信息栏 ---- 第一步：html 中： 在你要实现吸顶效果的div上，加上如下这一行代码： :class="{'is_fixed' : isFixed}" 触发吸顶效果的位置，如下： 第二步：data 定义中： data() { return { isFixed: false, offsetTop: 0, }
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
