手把手教你如何实现前端的吸顶效果-木庄网络博客

手把手教你如何实现前端的吸顶效果

2022-02-12 11:43:49 PHP中文网 JavaScript 百度已收录

本文摘自PHP中文网，作者烟雨青岚，侵删。

前端实现吸顶效果

1、监听scroll事件，实现吸顶功能

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// IE firefox       
 
(jqurey)             $(window).height()

元素距离文档顶端和左边的偏移值

(javascript)        DOM元素对象.offsetTop //IE firefox
 
(javascript)        DOM元素对象.offsetLeft //IE firefox
 
(jqurey)             jq对象.offset().top
 
(jqurey)             jq对象.offset().left

获取页面元素距离浏览器工作区顶端的距离

阅读剩余部分