全国咨询热线:18720358503

小程序流程开发设计_js完成移动端吸顶效果

类别:企业动态 发布时间:2021-01-06 浏览人次:

js实现移动端吸顶效果     ~   这篇文章主要为大家详细介绍了js实现移动端吸顶效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

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

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

根据图片中的思路来写:

 !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 
 div 我是即将吸顶的哦 /div 
 div /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 

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

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


推荐阅读

小程序流程开发设计_js完成移动端吸顶效果

js完成手机端吸顶实际效果 ~ 本文关键为大伙儿详尽详细介绍了js完成手机端吸顶实际效果,原文中实例编码详细介绍的十分详尽,具备一定的参照使用价值,很感兴趣的小伙子伴们...

2021-01-06
企业网站是用来“养”的吗 不把这个搞清网站难

“购房养车”,一样是消費品,房屋是买而车辆是养呢?实际上,细心想到来,房屋還是有区别的,从价钱上去说,房屋有保值和增值的将会,而车辆呢,两年后基本也不有价值了。而企...

2021-01-06
德阳企业网站建设-分析SEO网站合理的目录结构及

成都市企业网站建设优选红心柚建网站企业出示成都市高档企业网站建设,网站建设、网页页面设计方案及其seo优化营销推广加上 编写:成都市企业网站建设红心柚建网站企业 文章正...

2021-01-06
广州凡科互联网科技股份有限公司招聘抖音内容

招聘人数:28职位信息职责描述:1、分析、挖掘推广产品在新媒体渠道机会点;2、抖音推广视频brief输出、脚本输出、脚本审核、视频把控;3、定期对新媒体投放的内容进行总结分析,...

2021-01-06
广州凡科互联网科技股份有限公司招聘会议宣传

招聘人数:4职位信息岗位职责:1、熟悉并深度理解三大会议(西普会、西鼎会、美思会)的品牌定位,深度挖掘大会价值,熟悉客户特性和需求;2、制定传播策略、计划、渠道和方式...

2021-01-06
广州凡科互联网科技股份有限公司招聘销售经理

招聘人数:18职位信息1、 负责广东市场项目部市场拓展工作、协助团队完成项目部门年终营销目标;2、 能接受出差,配合领导进行项目拓展、开展渠道合作,跟进项目进程;3、 建立企...

2021-01-05
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信