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 相关文章推荐
jQuery 性能优化指南(2)
May 21 Javascript
javascript调试过程中找不到哪里出错的可能原因
Dec 16 Javascript
JS调试必备的5个debug技巧
Mar 07 Javascript
jquery实现点击页面计算点击次数
Jan 23 Javascript
浅谈jQuery中replace()方法
May 13 Javascript
Bootstrap零基础学习第一课之模板
Jul 18 Javascript
vue webuploader 文件上传组件开发
Sep 23 Javascript
微信小程序返回多级页面的实现方法
Oct 27 Javascript
bootstrap轮播模板使用方法详解
Nov 17 Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
Nov 02 Javascript
JavaScript实现模态对话框实例
Jan 13 Javascript
uniapp微信小程序实现一个页面多个倒计时
Nov 01 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 编写的 25个游戏脚本
2009/05/11 PHP
php中判断文件存在是用file_exists还是is_file的整理
2012/09/12 PHP
PHP中的插件机制原理和实例
2014/07/08 PHP
基础的prototype.js常用函数及其用法
2007/03/10 Javascript
javascript之对系统的toFixed()方法的修正
2007/05/08 Javascript
JSQL SQLProxy 的 php 版本代码
2010/05/05 Javascript
模仿百度三维地图的js数据分享
2011/05/12 Javascript
javascript上传图片前预览图片兼容大多数浏览器
2013/10/25 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
2013/12/29 Javascript
元素绑定click点击事件方法
2015/06/08 Javascript
jquery动态导航插件dynamicNav用法实例分析
2015/09/06 Javascript
BootStrap的Datepicker控件使用心得分享
2016/05/25 Javascript
jQuery插件passwordStrength密码强度指标详解
2016/06/24 Javascript
js判断checkbox是否选中个数的方法(超简单)
2016/08/19 Javascript
JavaScript中的遍历详解(多种遍历)
2017/04/07 Javascript
基于AngularJS实现表单验证功能
2017/07/28 Javascript
es6学习之解构时应该注意的点
2017/08/29 Javascript
jQuery简单判断值是否存在于数组中的方法示例
2018/04/17 jQuery
JavaScript实现计算圆周率到小数点后100位的方法示例
2018/05/08 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
2018/09/07 jQuery
angular使用md5,CryptoJS des加密的方法
2019/06/03 Javascript
Vue 打包体积优化方案小结
2020/05/20 Javascript
JS中箭头函数与this的写法和理解
2021/01/14 Javascript
Python MD5文件生成码
2009/01/12 Python
Python 详解基本语法_函数_返回值
2017/01/22 Python
简单学习Python多进程Multiprocessing
2017/08/29 Python
Python基于locals返回作用域字典
2020/10/17 Python
python爬虫scrapy框架的梨视频案例解析
2021/02/20 Python
牛津在线药房:Oxford Online Pharmacy
2020/11/16 全球购物
司机辞职报告范文
2014/01/20 职场文书
安全检查管理制度
2014/02/02 职场文书
光信息科学与技术专业职业生涯规划
2014/03/13 职场文书
小学生评语大全
2014/04/18 职场文书
减负增效提质方案
2014/05/23 职场文书
机械设备与数控技术专业求职信
2014/08/10 职场文书
《曹冲称象》教学反思
2016/02/20 职场文书