首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

基于 Vue 的两层吸坑总结

前言 近日,在做活动页的过程中遇到两层吸的需求,并且要兼容 IE9 及以上的浏览器。乍一看不就是个吸嘛,应该不难吧,事实证明还是了很多坑才出来。兼容性问题多到吐血,我太难了。...图片.gif 功能点:两层吸,因为 Tabs 区域比较长所以在滚动过程中点击一层 Tabs 会回弹至一层吸刚吸的位置,这个功能点和锚点有些类似。...主要原因:第一层吸还符合吸条件,第二层吸已经开始消失 解决方案:给第一层吸元素添加 minHeight 属性,其大小为第一层吸元素的高度与第二层吸元素的高度的和。...这里有一个需要注意的点在于:一开始第一层吸元素的高度并非两者之和,所以这里就需要监听滚动事件,在吸元素距离底部的距离为两者高度之和的位置处给第一层吸元素添加 minHeight 属性 以下代码块中...position 值为 static 即可 ◎ 吸“变形” 同样 DOM 结构的吸元素,在 IE 浏览器中,吸会变形 查看 vue-sticky 的源码,发现 position:fixed; 是设置在要吸的元素的第一个子元素上

1.5K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    基于 Vue 的两层吸坑总结

    本文首发于政采云前端团队博客:基于 Vue 的两层吸坑总结 https://www.zoo.team/article/double-ceiling ?...前言 近日,在做活动页的过程中遇到两层吸的需求,并且要兼容 IE9 及以上的浏览器。乍一看不就是个吸嘛,应该不难吧,事实证明还是了很多坑才出来。兼容性问题多到吐血,我太难了。...图片.gif 功能点:两层吸,因为 Tabs 区域比较长所以在滚动过程中点击一层 Tabs 会回弹至一层吸刚吸的位置,这个功能点和锚点有些类似。...主要原因:第一层吸还符合吸条件,第二层吸已经开始消失 解决方案:给第一层吸元素添加 minHeight 属性,其大小为第一层吸元素的高度与第二层吸元素的高度的和。...position 值为 static 即可 ◎ 吸“变形” 同样 DOM 结构的吸元素,在 IE 浏览器中,吸会变形 查看 vue-sticky 的源码,发现 position:fixed; 是设置在要吸的元素的第一个子元素上

    76310

    10位PHP大师的开发原则

    WEB开发世界里,PHP是最流行的语言之一,从PHP里,你能够很容易的找到你所需的脚本,遗憾的是,很少人会去用“最佳做法”去写一个PHP程序。...在合适的时候使用PHP – Rasmus Lerdorf 没有谁比PHP的创建者Rasmus Lerdorf明白PHP用在什么地方是更合理的,他于1995年发布了PHP这门语言,从那时起,PHP就像燎原之火...它完全可以作为一个案例,一个解决各种Web问题的工具需求所引起的案例,因此当PHP刚出现的时候,这种工具需求全部聚焦到PHP的身上。 但是,你不能奢望PHP可以解决所有问题。...他是墨尔本PHP开发和开源俱乐部的成员, 因此他对PHP有一定的了解,同时对PHP caching有一定的想法和经验。...不要使用PHP框架 – Rasmus Lerdorf 与Josh的观点恰恰相反,PHP的鼻祖Rasmus Lerdorf却认为最好不要使用PHP框架,为什么?因为不基于框架的PHP性能更好。

    89450

    PHP 面试过的坑(二)「建议收藏」

    Static类/方法 (1)可以不实例化类而直接访问 (2)静态属性不可以由对象通过->操作符来访问,用::方式调用 原文:http://www.php.cn/php-weizijiaocheng-372186...那么为什么要使用PHP单例模式? PHP一个主要应用场合就是应用程序与数据库打交道的场景,在一个应用中会存在大量的数据库操作,针对数据库句柄连接数据库的行为,使用单例模式可以避免大量的new操作。...\ PHP中的数据库操作有MySQL,MySQLi,PDO三种,可以用适配器模式统一成一致,使不同的数据库操作,统一成一样的API。...blog.csdn.net/hahahahahahahaha__1/article/details/80665491 16.echo,print_r ,print,var_dump 区别 echo是PHP...print_r:能打印数组,对象 var_dump:能打印对象数组,并且带数据类型 17.session 和 cookie 的区别 session:储存用户访问的全局唯一变量,存储在服务器上的php

    40720

    php关闭浏览器继续执行坑记录

    最近在项目中需要批量刷数据,但是由于项目的框架太老无法简单的使用命令行,而且项目比较急,所以想到之前的php关闭浏览器继续执行的路子,我记得php客户端断开继续执行需要配置nginx和fpm和php的配置...,当时既修改php又修改fpm,但是找不到当时记录的配置信息了,后来想到自己之前测试过一个方法可行,于是翻出来了,代码如下://设置客户端断开依然运行ignore_user_abort(true);//...request_terminate_timeout配置时间决定,request_terminate_timeout 适用于当max_execution_time由于某种原因无法终止脚本的时候,会把这个php-fpm...PHP_EOL;        file_put_contents($file, $text);        sleep(1);    }};//正式执行任务execute($func);以上代码已经在...这是一个坑记录,不要偷懒,不要盲目自信,耗时的任务都走cli,如果要用这种方式最好加上日志记录,并且记录进程id,如果异常可以干掉相关进程,只限于刷数据,正式环境业务功能这么写就是猪!

    53630

    PHP 三元运算很好用也很容易

    PHP 三元运算在日常编码中应用非常频繁,可以很好的减少代码的长度,减少if-else的代码片段。但是好用是很好用,如果用的不恰当也是非常容易雷的。今天就看看PHP的三元运算符有什么雷区。 ?...查看php运算符优先级表格,"=="的优先级别高于三元运算符。因此上面的代码等价于: $res = $type == 1?"..."3" :4; //$res = 3 echo $res; 网上很多都以"PHP三元运算符的运算顺序是反的"为标题的文章,其实,执行顺序并不是反的,而是运算符优先级的问题。...2、PHP7中新的三元运算与三元运算简写容易搞错 PHP7中新增三元运算符"??",在PHP5.3之后,三元运算符可以简写成"?:"的形式,这两者有什么区别呢?...另外就是要明白简写形式的含义是以判断条件作为最后赋值结果,不要与PHP7新增的三元运算符的含义搞混了。

    1.2K20
    领券