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

前端实现吸顶效果

成都创新互联服务项目包括塔城网站建设、塔城网站制作、塔城网页制作以及塔城网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，塔城网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到塔城省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

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

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

页面元素距离浏览器工作区顶端的距离 = 元素距离文档顶端偏移值 - 网页被卷起来的高度

即：

页面元素距离浏览器工作区顶端的距离 = DOM元素对象.offsetTop - document.documentElement.scrollTop

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

window.addEventListener("scroll",()=>{
	let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;let offsetTop = document.querySelector('#searchBar').offsetTop;
    if (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

感谢大家的阅读，希望大家收益多多

本文转自：https://blog.csdn.net/zqyzqy22/article/details/90634702

推荐教程：《JS教程》
文章标题：手把手教你如何实现前端的吸顶效果
当前网址：http://bjjierui.cn/article/cjecei.html