前言

吸顶功能在前端中很常见，这里以小米为例，在滚动前是这样的

当页面下拉到一定程度就红框标注的部分就会跑到顶部并固定。

本文讲采用原生的js来实现吸顶功能。

一、思路

当滚动页面时通过window.pageYOffset、document.documentElement.scrollTop、 document.body.scrollTop获取高度（这里之所以用三个获取高度方式，是为了消除标准模式和怪异模式之间的差别而做的兼容），当一定高度时（这里为152），控制组件设置为绝对定位且top：0或者设置为fixed固定定位，当页面销毁时，事件也随之销毁。

二、实现

1.绑定动态组件

首先给组件动态绑定样式v-bind：class=“{active：isactive}”，当isactive为true时，class=active。

is_fixed样式：设置为固定定位，且距离顶部为0，这时无论怎么滚动，组件将固定在顶部。

2.mounted绑定事件

接着，我们在钩子函数中用window.addEventListener()来绑定监听事件scroll。

3.方法的实现

再接着，我们需要再methods中实现initHeight()方法，该方法获取页面滚动时与顶部的距离，并判断高度是否大于152，大于的话this.isFixed=true，组件绑定样式is_Fixed.

4.销毁事件

在最后，我们需要在destory中销毁，否则该事件会在其他组件中运行，造成资源浪费。

总结

本文通过动态绑定样式，绑定js监听事件，以及获取页面顶部与当前位置的垂直距离，销毁事件，来实现吸顶功能。

使用原生js实现吸顶功能相关推荐

原生js实现吸顶效果
什么是吸顶效果: css中固定定位(fixed)实现的效果就是吸顶效果那么如何用js去操作. 代码如下 <style>* {margin: 0px;padding: 0px;}.top ...
[项目技巧]VUE小米商城+跨域+sass编译器封装+吸顶功能
前端跨域三种方案什么是跨域解决方法 CORS 后端修改 JSOP跨域安装插件 JSONP和CORS跨域的区别? JSONP通过js携带请求进行跨域,他不是传统的XHR请求:CORS后台处理跨域 ...
简易灯箱画廊设计html,原生Js实现的画廊功能
原生Js实现画廊功能,点击图片,在下方出现相应放大图片.给a标签绑定onclick点击事件.这里上方的小图和下方将要展示大图,都是同一张图片,只是上下两个img的style中设置了不同的width和h ...
java循环购物车结算系统_原生JS实现购物车结算功能代码
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD ...
原生js调用手机拍照功能
原生js调用手机拍照功能此功能主要用于混合App开发时手机拍照上传图片的功能! 话不多说直接上代码! 注:此代码在浏览器中运行时会报错,必须打开调试功能在手机上运行才可以! // html部分 // ...
【Vue3】电商网站吸顶功能
头部分类导航-吸顶功能电商网站的首页内容会比较多,页面比较长,为了能让用户在滚动浏览内容的过程中都能够快速的切换到其它分类.需要分类导航一直可见,所以需要一个吸顶导航的效果. 目标:完成头部组件吸顶 ...
怎样编写html购物车结算页面,原生JS实现购物车结算功能
原生JS实现购物车结算功能 @charset "utf-8"; *{margin:0;padding:0;list-style-type:none;} a{color:#666;t ...
uniapp吸顶功能实现
一.vue页面代码实现 <view :class="[(isFixedTop) ? 'fixedTop' : '']" id="box" class=&q ...
原生JS实现百度搜索功能
今天呢给大家分享一下自己用原生JS做的一个百度搜索功能,下面上代码: <!DOCTYPE html> <html><head><meta charset=&q ...

使用原生js实现吸顶功能

文章目录

前言