吸顶和吸底

html-css07

吸顶和吸底,第1张

– 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// 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

置顶的优点

1.减少跳出率:如果是从搜寻引擎而来的访客,对我们网站不熟,文章读完、资料找到后,没有个吸引注意力的设计,通常就直接离开了。那么如果浮动导览列恰巧有个访客有兴趣的主题,就有机会留住这位客人了。

2.随时提供导航:不是每个上网的人都很熟悉网站的构造、摆设位置等,那么这个浮动导览列只要项目设计得好,就能让这位迷途羔羊的网路生手有一个很好的重点指引。

3.节省操作:导览列置顶可以省去按「回到顶端」这个按钮,网页可以少安装、执行一个区块,而且「回到顶端」按钮有时会遮住一些文字。

实现方法

导航栏下拉至一定高度后固定在顶部的特效。实现的方法有好多种,这里介绍个最简单易懂的方法。通过jQuery添加移除类来实现

注意:dispaly:fixed;会使元素脱离文档,不占据文档空间。所以页面会有一些跳动,这时可以给相邻元素加上nav所占高度的margin-top或padding-top即可

(1)“导航栏下拉至一定高度后固定在顶部的特效”,也有同学喜欢叫跟随导航什么的。反正就是这个么意思。先直接上代码:

将这个js放到要实现效果的页面里面去,然后我们要修改的是第三行的.nav,“nav“改成你自己页面导航栏的class;第七行的”100“为下拉到100个像素的时候触发特效,可以自行修改至合适的高度。

(2)然后在css文件里面增加这个属性:

这样就差不多完成了。

讲下这个js的意思,判断下拉到一定高度的时候,给导航栏的div插入一个”fixednav“属性,然后给”fixednav“加上固定在顶部的参数。