– 2 、 css 实现吸顶
写页面经常会遇到这种需求：导航菜单初始位置不在头部，滑动页面时候当导航菜单滑到头部位置就固定在头部，往下滑导航菜单又回到初始位置。
•网页被卷起来的高度/宽度（即浏览器滚动条滚动后隐藏的页面内容高度）
•(javascript) document.documentElement.scrollTop //firefox
•(javascript) document.documentElement.scrollLeft //firefox
•(javascript) document.body.scrollTop //IE
•(javascript) document.body.scrollLeft //IE
•(jqurey)
$(window).scrollTop() (jqurey)
$(window).scrollLeft()
•网页工作区域的高度和宽度
•(javascript) document.documentElement.clientHeight// IEfirefox (jqurey)
$(window).height()
•元素距离文档顶端和左边的偏移值
•(javascript) DOM元素对象.offsetTop //IEfirefox (javascript) DOM元素对象.offsetLeft //IEfirefox (jqurey) jq对象.offset().top
(jqurey) jq对象.offset().left
•页面元素距离浏览器工作区顶端的距离= 元素距离文档顶端偏移值- 网页被卷起来的高度
•即：
•页面元素距离浏览器工作区顶端的距离= DOM元素对象.offsetTop - document.documentElement.scrollTop
•1、监听scroll事件，实现吸顶功能
•window.addEventListener("scroll",()=>{
let scrollTop = document.documentElement.scrollTop || document.body.scrollTopletoffsetTop = document.querySelector('#searchBar').offsetTopif
(scrollTop >offsetTop) { document.querySelector('#searchBar').style.position="fixed"document.querySelector('#searchBar').style.top="0"
} else { document.querySelector('#searchBar').style.position=""document.querySelector('#searchBar').style.top=""
} })
•2、css实现吸顶
•position:sticky
top:0
相应的有时候就需要就有吸底效果
– 1 、监听 scroll 事件，实现吸底功能
• // 监听滚动条是否到达底部
• watchSchool() {
• //变量scrollTop是滚动条滚动时，距离顶部的距离
• var scrollTop =
• document.documentElement.scrollTop || document.body.scrollTop
• //变量windowHeight是可视区的高度
• var windowHeight =
• document.documentElement.clientHeight || document.body.clientHeight
• //变量scrollHeight是滚动条的总高度
• var scrollHeight =
• document.documentElement.scrollHeight || document.body.scrollHeight
• //滚动条到底部的条件
• this.bottom = scrollTop + windowHeight == scrollHeight ? 43 : 0
• }
• window.onscroll = () => {
• this.watchSchool()
• }
2、css实现吸顶
•position:sticky
bottom:0
元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。
您还可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值：
h1 {padding: 10px 0.25em 2ex 20%
也通过使用下面四个单独的属性，分别设置上、右、下、左内边距：
padding简写属性。作用是在一个声明中设置元素的所内边距属性。
padding-bottom设置元素的下内边距。
padding-left设置元素的左内边距。
padding-right设置元素的右内边距。
padding-top设置元素的上内边距。
scrolltop是jQuery中的一个方法，它可以设置 <div>元素中滚动条的垂直偏移量，基本的用法是：
scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。
scroll top offset 指的是滚动条相对于其顶部的偏移。
如果该方法未设置参数，则返回以像素计的相对滚动条顶部的偏移。
工具原料：jQuery、编辑器、浏览器
1、在一个有内容的div中是吸纳设置滚动条的偏移量和获取偏移量的值，代码如下：
<html><head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
$("div").scrollTop(100)
})
$(".btn2").click(function(){
alert($("div").scrollTop()+" px")
})
})
</script>
</head>
<body>
<div style="border:1px solid blackwidth:200pxheight:200pxoverflow:auto">
This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
</div>
<button class="btn1">把 scroll top offset 设置为 100px</button>
<br />
<button class="btn2">获得 scroll top offset</button>
</body>
</html>
2、运行的效果如下：
点击设置为100px后的效果：
点击获取值的效果：
