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.0新属性效果在ie下的解决方案
May 10 HTML / CSS
css3 background属性调整增强介绍
Dec 18 HTML / CSS
CSS3盒子模型详解
Apr 24 HTML / CSS
html5+css3气泡组件的实现
Nov 21 HTML / CSS
利用纯css3实现的文字亮光特效的代码演示
Nov 27 HTML / CSS
CSS3实现王者荣耀匹配人员加载页面的方法
Apr 16 HTML / CSS
CSS3 中filter(滤镜)属性使用详解
Apr 07 HTML / CSS
值得收藏的HTML5资源(学习html5的朋友可以收藏下)
Jul 20 HTML / CSS
使用HTML5的表单验证的简单示例
Sep 09 HTML / CSS
HTML5 Canvas基本线条绘制的实例教程
Mar 17 HTML / CSS
浅谈Html5多线程开发之WebWorkers
May 02 HTML / CSS
详解HTML5 Canvas标签及基本使用
Jan 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 adodb操作mysql数据库
2009/03/19 PHP
PHP计算数组中值的和与乘积的方法(array_sum与array_product函数)
2016/04/01 PHP
thinkphp中多表查询中防止数据重复的sql语句(必看)
2016/09/22 PHP
PHP实现递归目录的5种方法
2016/10/27 PHP
laravel 解决强制跳转 https的问题
2019/10/22 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
js输出列表实现代码
2010/09/12 Javascript
JavaScript(js)设置默认输入焦点(focus)
2012/12/28 Javascript
jquery如何改变html标签的样式(两种实现方法)
2013/01/16 Javascript
jQuery的内容过滤选择器学习教程
2016/04/18 Javascript
vue+vuex+axios实现登录、注册页权限拦截
2018/03/09 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
2018/03/20 Javascript
vue实现重置表单信息为空的方法
2018/09/29 Javascript
jquery 插件重新绑定的处理方法分析
2019/11/23 jQuery
js实现九宫格布局效果
2020/05/28 Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
2020/11/02 Javascript
[08:44]DOTA2发布会群星聚首 我们都是刀塔人
2014/03/21 DOTA
Python中sort和sorted函数代码解析
2018/01/25 Python
tensorflow实现二维平面模拟三维数据教程
2020/02/11 Python
python输出第n个默尼森数的实现示例
2020/03/08 Python
查看已安装tensorflow版本的方法示例
2020/04/19 Python
Python OpenCV实现测量图片物体宽度
2020/05/27 Python
python实现感知机模型的示例
2020/09/30 Python
详解Python中list[::-1]的几种用法
2020/11/16 Python
python爬虫中采集中遇到的问题整理
2020/11/27 Python
CSS3实现同时执行倾斜和旋转的动画效果
2016/10/27 HTML / CSS
匡威西班牙官网:Converse西班牙
2019/10/01 全球购物
TUMI香港官网:国际领先的行李箱、背囊品牌
2021/03/01 全球购物
十一个高级MySql面试题
2014/10/06 面试题
党员自我评价分享
2013/12/13 职场文书
购房协议书范本
2014/04/11 职场文书
语文课外活动总结
2014/08/27 职场文书
领导干部作风整顿个人剖析材料
2014/10/11 职场文书
2014最新预备党员思想汇报范文:中国梦,我的梦
2014/10/25 职场文书
公司酒会致辞
2015/07/30 职场文书
《活见鬼》教学反思
2016/02/24 职场文书