Html5之title吸顶功能


Posted in HTML / CSS onJune 04, 2018

吸顶功能

吸顶是一种比较常见的交互效果,当页面滑出屏幕边界,标题会自动吸附在屏幕边缘,用于提示用户。

基本原理

在H5中实现的基本原理就是判断当前页面滑动的距离scrollTop和标题距离页面顶部距离offsetTop的关系,进而设置标题的position = fixed。这里需要明白scrollTop和offsetTop属性的含义。

scrollTop

代表在有滚动条时,滚动条向下滚动的距离也就是元素顶部被遮住部分的高度。在没有滚动条时scrollTop==0恒成立。单位px,可读可设置。

Html5之title吸顶功能

offsetTop

当前元素顶部距离最近父元素顶部的距离,和有没有滚动条没有关系。单位px,只读元素。

Html5之title吸顶功能

所以,当scrollTop>offsetTop时,title的position = fixed,top = 0,使之固定在屏幕上方;当scrollTop < offsetTop,取消position = fixed,代码如下:

if (fixedDom[0].offsetTop - elementScrollTop < 0){
            fixedDom.addClass("road-tab-fixed")
          }else {
            fixedDom.removeClass("road-tab-fixed")
          }

效果如下:

Html5之title吸顶功能

优化

有图看出基本功能实现的差不多了,但是感觉哪里怪怪的。当页面向上滑时效果还是比较自然的,但是当页面下滑时,只有当页面完全滑到顶部时,标题才会回到原位,导致过度不自然,所以对于titile的position的设定要分两种情况:上滑和下滑。

判断上下滑动方向

判断上下滑动点击此处

当页面上滑时

当scrollTop>offsetTop时,title的position = fixed,top = 0,使之固定在屏幕上方;

当页面下滑时

当scrollTop<offsetTop时,取消掉fixed属性,这样就会使标题跟随页面滑动下来,交互更加自然了,

代码如下:

if(beforeElementScrollTop - elementScrollTop <=0){//up
            console.log('up');
            if (beforeOffsetTop - elementScrollTop < 0){
              fixedDom.addClass("road-tab-fixed")
            }
          }else{
            console.log('down');
            // console.log('beforeOffsetTop-----------',beforeOffsetTop);
            // console.log('elementScrollTop--------------',elementScrollTop);
            if (beforeOffsetTop - elementScrollTop >= 0){
              fixedDom.removeClass("road-tab-fixed")
            }
          }

效果如下:

Html5之title吸顶功能

优化之scroll节流

当对页面监听了scroll事件后,滑动时scroll的回调会一直在执行,影响到页面性能,而节流只允许一个函数在 X 毫秒内执行一次,只有当上一次函数执行后过了你规定的时间间隔,才能进行下一次该函数的调用。代码如下

const fixedDom = $("#road-tab"),
          isIos = utils.getMobileType(),
          tabclass = "road-tab-fixed";
        let beforeElementScrollTop = 0;
        let beforeOffsetTop = fixedDom[0].offsetTop;
        //scroll节流
        const throttle = (func,wait,mustRun) => {
          var timeout,
            startTime = new Date();

          return function() {
            var context = this,
              args = arguments,
              curTime = new Date()
            clearTimeout(timeout)
            // 如果达到了规定的触发时间间隔,触发 handler
            if(curTime - startTime >= mustRun){
              beforeElementScrollTop = document.body.scrollTop;
              console.log("beforelementScrollTop----------",document.body.scrollTop);
              func.apply(context,args);
              startTime = curTime
              // 没达到触发间隔,重新设定定时器
            }else{
              timeout = setTimeout(func, wait)
            }
          }
        }
        const winScroll = (e) => {
          const elementScrollTop=document.body.scrollTop;
          console.log('elementScrollTop--------------',elementScrollTop);
          if(beforeElementScrollTop - elementScrollTop <=0){//up
            console.log('up');
            if (beforeOffsetTop - elementScrollTop < 0){
              fixedDom.addClass("road-tab-fixed")
            }
          }else{
            if (beforeOffsetTop - elementScrollTop >= 0){console.log("UUUUUU");
              fixedDom.removeClass("road-tab-fixed")
            }
          }
        };
        $(window).off("scroll").on("scroll", throttle(winScroll,10,100));

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

HTML / CSS 相关文章推荐
使用CSS3代码绘制可爱的Hello Kitty猫
Aug 03 HTML / CSS
css3图片边框border-image的用法
Jun 30 HTML / CSS
CSS3用@font-face实现自定义英文字体
Sep 23 HTML / CSS
纯css3实现效果超级炫的checkbox复选框和radio单选框
Sep 01 HTML / CSS
基于CSS3 animation动画属性实现轮播图效果
Sep 12 HTML / CSS
CSS3 实现图形下落动画效果
Nov 13 HTML / CSS
HTML5之多线程(Web Worker)
Jan 02 HTML / CSS
HTML5的结构和语义(3):语义性的块级元素
Oct 17 HTML / CSS
详解如何用HTML5 Canvas API控制图片的缩放变换
Mar 22 HTML / CSS
canvas绘制圆角头像的实现方法
Jan 17 HTML / CSS
如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度
Aug 01 HTML / CSS
详解HTML5中CSS外观属性
Sep 10 HTML / CSS
浅谈Html5移动端ios/Android兼容性总结
Jun 01 #HTML / CSS
HTML5中的websocket实现直播功能
May 21 #HTML / CSS
深入浅析HTML5中的article和section的区别
May 15 #HTML / CSS
HTML5触摸事件实现移动端简易进度条的实现方法
May 04 #HTML / CSS
HTML5声音录制/播放功能的实现代码
May 03 #HTML / CSS
HTML5离线应用与客户端存储的实现
May 03 #HTML / CSS
浅谈Html5多线程开发之WebWorkers
May 02 #HTML / CSS
You might like
php下实现在指定目录搜索指定类型文件的函数
2008/10/03 PHP
Trying to clone an uncloneable object of class Imagic的解决方法
2012/01/11 PHP
PHP连接MYSQL数据库实例代码
2016/01/20 PHP
php阳历转农历优化版
2016/08/08 PHP
PHP标准类(stdclass)用法示例
2016/09/28 PHP
帮助避免错误的Javascript陷阱清单
2009/05/31 Javascript
js下关于onmouseout、事件冒泡的问题经验小结
2010/12/09 Javascript
JS返回iframe中frameBorder属性值的方法
2015/04/01 Javascript
基于jquery实现即时检查格式是否正确的表单
2016/05/06 Javascript
阿里云ecs服务器中安装部署node.js的步骤
2016/10/08 Javascript
vue.js加载新的内容(实例代码)
2017/06/01 Javascript
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
2018/02/01 Javascript
element-ui 时间选择器限制范围的实现(随动)
2019/01/09 Javascript
简述vue-cli中chainWebpack的使用方法
2019/07/30 Javascript
angular8和ngrx8结合使用的步骤介绍
2019/12/01 Javascript
vue2.x 对象劫持的原理实现
2020/04/19 Javascript
[02:56]DOTA2上海特锦赛小组赛解说FreeAgain采访花絮
2016/02/27 DOTA
[53:10]完美世界DOTA2联赛决赛日 FTD vs GXR 第二场 11.08
2020/11/11 DOTA
Python全局变量操作详解
2015/04/14 Python
Django 实现对已存在的model进行更改
2020/03/28 Python
matlab、python中矩阵的互相导入导出方式
2020/06/01 Python
读取nii或nii.gz文件中的信息即输出图像操作
2020/07/01 Python
python 使用递归的方式实现语义图片分割功能
2020/07/16 Python
python中return不返回值的问题解析
2020/07/22 Python
使用PyCharm安装pytest及requests的问题
2020/07/31 Python
Python3.9.0 a1安装pygame出错解决全过程(小结)
2021/02/02 Python
css3实现图片遮罩效果鼠标hover以后出现文字
2013/11/05 HTML / CSS
Boda Skins皮衣官网:奢侈皮夹克,全球配送
2016/12/15 全球购物
本科毕业生自我鉴定
2013/11/02 职场文书
美容院营销方案
2014/03/05 职场文书
宣传部部长竞选演讲稿
2014/04/26 职场文书
就业协议书怎么填
2014/09/15 职场文书
交通事故死亡赔偿协议书
2014/12/03 职场文书
2014年路政工作总结
2014/12/10 职场文书
2015年企业团支部工作总结
2015/05/21 职场文书
2019秋季运动会口号
2019/06/25 职场文书