前言：
眼前各位老铁们对“导航条滚动css代码”大致比较注意，姐妹们都想要剖析一些“导航条滚动css代码”的相关资讯。那么小编在网上网罗了一些对于“导航条滚动css代码””的相关资讯，希望我们能喜欢，姐妹们一起来学习一下吧！1、偏移量offset
offset是偏移、位移、补偿的意思（取整数值四舍五入），表示元素的偏移量。
offsetHeight和offsetWidth元素盒子模型的宽高（width/height + padding+border）offsetLeft和offsetTop1、表示当前元素距离它最近的相对父级（定位元素）的水平或者垂直距离。2、如果它一直没有相对父级元素，默认指向bodyoffsetParent和parentNodeoffsetParent 指的是最近的一个相对父级元素（默认指向body）parentNode 就是直接父级（标签结构中的父子关系 ）
html和css代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; border: 0; list-style: none; } div { width: 300px; height: 300px; border: 1px solid #000; margin: 100px; position: relative; } span { width: 100px; height: 100px; border: 1px solid #000; position: absolute; left: 120px; top: 30px; } </style> </head> <body> <div> <span></span> </div> </body> </html>JavaScript代码
var oBox = document.getElementsByTagName('div')[0]; console.log(oBox.offsetLeft); // 到文档左侧的距离 console.log(oBox.offsetTop); // 到文档顶部的距离 console.log(oBox.offsetWidth); // 获取盒子的实际占位宽度(border+contentWidth+padding) console.log(oBox.offsetHeight); // 获取盒子的实际占位高度(border+contentHeight+padding) console.log("-------------------------------------"); var spanTag = document.getElementsByTagName('span')[0]; console.log(spanTag.offsetLeft); // 到父盒子左侧的距离(前提是父盒子有定位，没定位则直接索引到body) console.log(spanTag.offsetTop); // 到父盒子顶部的距离(前提是父盒子有定位，没定位则直接索引到body) console.log(spanTag.offsetWidth); // 获取span的实际占位宽度(border+contentWidth+padding) console.log(spanTag.offsetHeight); // 获取span的实际占位高度(border+contentHeight+padding) console.log(spanTag.offsetParent); // 相对父级元素（默认指向body）2、滚动scroll
scroll是长卷纸，卷轴的意思，表示浏览器滚动时元素的卷曲值。
scrollHeight和scrollWidth代表获容器内部可滚动的宽度和高度（width/height + padding）包括由于溢出而无法展示在网页的不可见部分scrollTop和scrollLeft相对父盒子，元素 向上/向左 卷曲出去（滚出去）的距离
html和css代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; } #box { width: 200px; height: 200px; overflow: auto; } #content { width: 300px; height: 300px; background: #ccf; border: 1px solid #000; padding: 2px; } </style> </head> <body> <div id="box"> <div id="content"> <p> 客户：“这个图下班之前必须发给我！” 设计师：“好的！” 第二天清早。客户：“图怎么还没发过来？” 设计师：“我还没下班呢…”。 客户：“这个图下班之前必须发给我！” 设计师：“好的！” 第三天清早。客户：“图怎么还没发过来？” 设计师：“我还没下班呢…”</p> </div> </div> <button id="btn">按钮</button> </body> </html>JavaScript代码
var oBox = document.getElementById('box'); var oContent = document.getElementById('content'); var oBtn = document.getElementById("btn") console.log(oContent.scrollWidth); // 内容盒子的可滚动宽度 console.log(oContent.scrollHeight); // 内容盒子的可滚动高度 console.log(oBox.scrollWidth); // 限定了宽高的父盒子中，其内容盒子可滚动的宽度 console.log(oBox.scrollHeight); // 限定了宽高的父盒子中，其内容盒子可滚动的高度 oBtn.onclick = function () { console.log("-------------------------"); console.log(oBox.scrollTop); // 获取内容盒子相对于父盒子已经滚动了多少高度 console.log(oBox.scrollLeft); // 获取内容盒子相对于父盒子已经滚动了多少宽度 }3、客户区client
client获取的是元素的可视区域
clientWidth和clientHeight不包含border在内的实际宽度（width/height + padding）clientLeft和clientTop打印出盒子 左侧边框/顶部边框 的厚度几乎不用
案例：吸顶导航
html和css代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>吸顶导航</title> <style> * { margin: 0; padding: 0; } div { width: 100%; height: 100px; line-height: 100px; text-align: center; background: skyblue; } </style> </head> <body> <section> <p>段落</p> ... <p>段落</p> <div id="box">吸顶导航</div> <p>段落</p> ... <p>段落</p> </section> </body> </html>JavaScript代码
// 获取盒子的Y坐标 var boxTop = box.offsetTop; console.log(boxTop); // scroll 滚动事件 window.onscroll = function () { // 获取文档滚出的距离 var winTop = document.documentElement.scrollTop; console.log(winTop); // 每当滚动的时候都需要获取超出窗口的范围 然后和盒子Y坐标做对比 // 如果滚动距离大于等于盒子Y坐标，就设置成固定定位，否则去掉盒子定位 if (winTop >= boxTop) { box.style.position = "fixed"; box.style.top = 0; } else { box.style.position = "static"; } } 版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #导航条滚动css代码
