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属性box-shadow使用详细教程
Jan 21 HTML / CSS
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
Dec 28 HTML / CSS
CSS3感应鼠标的背景闪烁和图片缩放动画效果
May 14 HTML / CSS
CSS3点击按钮实现背景渐变动画效果
Oct 19 HTML / CSS
CSS3 清除浮动的方法示例
Jun 01 HTML / CSS
HTML5 Canvas绘制文本及图片的基础教程
Mar 14 HTML / CSS
Html5移动端获奖无缝滚动动画实现示例
Jun 25 HTML / CSS
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
Dec 13 HTML / CSS
HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例
Aug 18 HTML / CSS
使用HTML5和CSS3制作一个模态框的示例
Mar 07 HTML / CSS
html5 http的轮询和Websocket原理
Oct 19 HTML / CSS
使用 CSS 构建强大且酷炫的粒子动画效果
Aug 14 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实现多图片上传类实例
2014/07/26 PHP
PHP实现抓取HTTPS内容
2014/12/01 PHP
php数字运算验证码的实现代码
2015/07/30 PHP
分享PHP计算两个日期相差天数的代码
2015/12/23 PHP
Javascript与vbscript数据共享
2007/01/09 Javascript
JS+XML 省份和城市之间的联动实现代码
2009/10/14 Javascript
jQuery选择器的工作原理和优化分析
2011/07/25 Javascript
JS实现时间格式化的方式汇总
2013/10/16 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
2016/09/03 Javascript
快速掌握jQuery插件WebUploader文件上传
2016/11/07 Javascript
Node.js 的模块知识汇总
2017/08/16 Javascript
使用javaScript实现鼠标拖拽事件
2020/04/03 Javascript
React Form组件的实现封装杂谈
2018/05/07 Javascript
微信小程序首页的分类功能和搜索功能的实现思路及代码详解
2018/09/11 Javascript
JS数组去重的6种方法完整实例
2018/12/08 Javascript
[47:43]Alliance vs KG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python实现保存网页到本地示例
2014/03/16 Python
Python实现遍历数据库并获取key的值
2015/05/17 Python
python开发中range()函数用法实例分析
2015/11/12 Python
Python获取时间范围内日期列表和周列表的函数
2019/08/05 Python
python迭代器常见用法实例分析
2019/11/22 Python
Python socket服务常用操作代码实例
2020/06/22 Python
python中format函数如何使用
2020/06/22 Python
html5实现多文件的上传示例代码
2014/02/13 HTML / CSS
美国在线鲜花速递:ProFlowers
2017/01/05 全球购物
Nisbets法国:英国最大的厨房和餐饮设备供应商
2019/03/18 全球购物
Monica Vinader官网:英国轻奢珠宝品牌
2020/02/05 全球购物
在校生自我鉴定
2014/01/23 职场文书
道德之星事迹材料
2014/05/03 职场文书
优质服务口号
2014/06/11 职场文书
政风行风评议整改方案
2014/09/15 职场文书
团党委领导干部党的群众路线教育实践活动个人对照检查材料思想汇
2014/10/05 职场文书
小学生作文批改评语
2014/12/25 职场文书
向雷锋同志学习倡议书
2015/04/27 职场文书
干部外出学习心得体会
2016/01/18 职场文书
八年级作文之友情
2019/11/25 职场文书