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 相关文章推荐
HTML5如何适配 iPhone IOS 底部黑条
Mar 09 HTML / CSS
利用CSS3的定位页面元素
Aug 29 HTML / CSS
利用CSS3的checked伪类实现OL的隐藏显示的方法
Dec 18 HTML / CSS
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
Feb 07 HTML / CSS
CSS3实现瀑布流布局与无限加载图片相册的实例代码
Dec 22 HTML / CSS
canvas三角函数模拟水波效果的示例代码
Jul 03 HTML / CSS
整理HTML5的一些新特性与Canvas的常用属性
Jan 29 HTML / CSS
HTML5为输入框添加语音输入功能的实现方法
Feb 06 HTML / CSS
HTML5拖拽功能实现的拼图游戏
Jul 31 HTML / CSS
html5 冒号分隔符对齐的实现
Jul 31 HTML / CSS
H5离线存储Manifest原理及使用
Apr 28 HTML / CSS
html5实现输入框fixed定位在屏幕最底部兼容性
Jul 03 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
一个取得文件扩展名的函数
2006/10/09 PHP
PIGCMS 如何关闭聊天机器人
2015/02/12 PHP
php字符串分割函数用法实例
2015/03/17 PHP
培养自己的php编码规范
2015/09/28 PHP
PHP基于自增数据如何生成不重复的随机数示例
2017/05/19 PHP
PHP+JS实现的实时搜索提示功能
2018/03/13 PHP
Array.prototype.slice 使用扩展
2010/06/09 Javascript
复选框全选与全不选操作实现思路
2013/08/18 Javascript
用js通过url传参把数据从一个页面传到另一个页面
2014/09/01 Javascript
Jquery修改页面标题title其它JS失效的解决方法
2014/10/31 Javascript
JavaScript中instanceof运算符的使用示例
2016/06/08 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
图解prototype、proto和constructor的三角关系
2016/07/31 Javascript
微信小程序网络请求wx.request详解及实例
2017/05/18 Javascript
基于vue中css预加载使用sass的配置方式详解
2018/03/13 Javascript
vue双向绑定数据限制长度的方法
2019/11/04 Javascript
Vue常用的全选/反选的示例代码
2020/02/19 Javascript
Python 解析XML文件
2009/04/15 Python
用python登录Dr.com思路以及代码分享
2014/06/25 Python
Python3.2中的字符串函数学习总结
2015/04/23 Python
python安装Scrapy图文教程
2017/08/14 Python
TensorFlow神经网络优化策略学习
2018/03/09 Python
python爬取微信公众号文章
2018/08/31 Python
对python中不同模块(函数、类、变量)的调用详解
2019/07/16 Python
Python操作qml对象过程详解
2019/09/26 Python
tensorflow 2.0模式下训练的模型转成 tf1.x 版本的pb模型实例
2020/06/22 Python
Python爬虫爬取ts碎片视频+验证码登录功能
2021/02/22 Python
实习教师自我鉴定
2013/09/27 职场文书
幼儿园消防演练方案
2014/02/13 职场文书
2014年班主任自我评价范文
2014/04/23 职场文书
党的群众路线教育学习材料
2014/05/12 职场文书
群众路线对照检查材料思想汇报怎么写
2014/09/18 职场文书
安徽导游词
2015/02/12 职场文书
公司搬迁通知
2015/04/20 职场文书
2015年高三毕业班班主任工作总结
2015/10/22 职场文书
css中:last-child不生效的解决方法
2022/08/05 HTML / CSS