js实现移动端吸顶效果


Posted in Javascript onJanuary 08, 2020

今天来简单的写一个吸顶,供大家参考,具体内容如下

先罗列一下吸顶需要使用到的属性
** scrollTop 获取当前滚动的距离(也就是盒子距离顶部的距离)
offsetTop 盒子距离顶部的高度
offsetHeight 盒子自身的高度
scrollY 滚动的距离
**

想要写出一个吸顶 一定要先明白这几个属性哦(当然了,他也很简单,相信您看完会有一定的收获)

js实现移动端吸顶效果

根据图片中的思路来写:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    *{
      margin:0;
      padding:0;
      box-sizing:border-box;
    }

    .wrap{
      overflow-y:scroll;
    }

    .header{
      width: 100%;
      height: 40px;
      background: lightgreen;
      color:#fff;
      text-align: center;
      line-height: 40px;
    }
    
    .main{
      height: 1000px;
      background: lightyellow;
    }

    .fixed{
      position: fixed;
      top:0;
    }

  </style>
</head>
<body>
  <div class="wrap">
    <div class="header">我是即将吸顶的哦</div>
    <div class="main"></div>
  </div>

  <script>
    const head = document.querySelector('.header');
    document.addEventListener('scroll',()=>{
      //console.log(document.documentElement.offsetTop) // 0 html距离顶部的距离
      //console.log(document.querySelector('.header').offsetHeight) // 40 红盒子的高度
      //console.log(window.scrollY) // 滚动的距离
      if(window.scrollY > head.offsetHeight){
        head.classList.add('fixed')
      }
    })
  </script>
</body>
</html>

敬请期待 效果图示(正在制作中…)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用js判断用户浏览器是否是XP SP2的IE6
Mar 08 Javascript
JS实现的用来对比两个用指定分隔符分割的字符串是否相同
Sep 19 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
Sep 08 Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
Aug 02 Javascript
bootstrap配合Masonry插件实现瀑布式布局
Jan 18 Javascript
vue如何实现observer和watcher源码解析
Mar 09 Javascript
微信小程序表单验证错误提示效果
May 19 Javascript
Node.js中 __dirname 的使用介绍
Jun 19 Javascript
fetch 使用及如何接收JS传值
Nov 11 Javascript
vue.js根据代码运行环境选择baseurl的方法
Feb 28 Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
JavaScript模板引擎实现原理实例详解
Dec 14 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
Jan 08 #Javascript
微信小程序实现吸顶效果
Jan 08 #Javascript
JS实现吸顶特效
Jan 08 #Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
Jan 07 #Javascript
electron+vue实现div contenteditable截图功能
Jan 07 #Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
Jan 07 #Javascript
Vue程序化的事件监听器(实例方案详解)
Jan 07 #Javascript
You might like
php上的memcache和memcached两个pecl库
2010/03/29 PHP
PHP下操作Linux消息队列完成进程间通信的方法
2010/07/24 PHP
php常用Stream函数集介绍
2013/06/24 PHP
PHP基于自定义函数实现的汉字转拼音功能实例
2017/09/30 PHP
JavaScript Event学习第七章 事件属性
2010/02/07 Javascript
js中更短的 Array 类型转换
2011/10/30 Javascript
js动态在form上插入enctype=multipart/form-data的问题
2012/05/24 Javascript
jquery动态添加删除一行数据示例
2014/06/12 Javascript
jquery判断密码强度的验证代码
2020/04/22 Javascript
jQuery旋转木马式幻灯片轮播特效
2015/12/04 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
2020/12/13 Javascript
详谈JS中实现种子随机数及作用
2016/07/19 Javascript
JS使用onerror捕获异常示例
2016/08/03 Javascript
微信小程序 教程之事件
2016/10/18 Javascript
解决Window10系统下Node安装报错的问题分析
2016/12/13 Javascript
函数四种调用模式以及其中的this指向
2017/01/16 Javascript
原生js编写2048小游戏
2017/03/17 Javascript
微信公众号菜单配置微信小程序实例详解
2017/03/31 Javascript
vue 项目build错误异常的解决方法
2019/04/22 Javascript
用 js 写一个 js 解释器过程详解
2019/08/02 Javascript
python的类方法和静态方法
2014/12/13 Python
Python中的zip函数使用示例
2015/01/29 Python
python使用KNN算法手写体识别
2018/02/01 Python
Python魔术方法专题
2020/06/19 Python
Python3中对json格式数据的分析处理
2021/01/28 Python
火山咖啡:Volcanica Coffee
2019/10/29 全球购物
印度电子产品购物网站:Vijay Sales
2021/02/16 全球购物
高中三年学习生活的自我评价
2013/10/10 职场文书
家长给孩子的表扬信
2014/01/17 职场文书
综治宣传月活动总结
2014/04/28 职场文书
承诺书模板大全
2015/05/04 职场文书
2015年计划生育责任书
2015/05/08 职场文书
公司要求试用期员工提交“述职报告”,该怎么写?
2019/07/17 职场文书
详解Python描述符的工作原理
2021/06/11 Python
详解Spring事件发布与监听机制
2021/06/30 Java/Android
Android使用EventBus发送消息,Fragment中接收消息的方法会执行多次
2022/04/24 Java/Android