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

纯CSS实现吸附效果

前言 「吸附效果」就是网页滚到到某个位置,元素固定在该位置,后续不随网页滚动而滚动。吸附效果很常见,譬如吸顶效果和吸底效果,经常用在跟随导航、移动广告和悬浮提示等场景中。...原理 在jQuery时代就有很多吸附效果插件了,现在常用三大前端框架也有自身第三方吸附效果组件。...JS实现吸附效果代码在网上一搜一大堆,更何况笔者喜欢耍CSS,在此就不贴相关JS代码了。本文为各位同学推荐一个很少见很少用CSS属性:position:sticky。...上述Demo里5个节点都声明了position:sticky,但由于top/bottom赋值有所不同就产生了不同吸附效果。 ?...兼容 兼容性勉强还行,近2年发版浏览器都能支持,Safari和Firefox兼容性还是挺赞。有吸附效果需求同学建议一试,要兼容IExplorer就算了。 ? 兼容

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

    JS动画效果

    JavaScript 动画框架 框架封装 ---- 相信大家在很多门户网站上都可以看到动画交互效果,通过这些动画生动地体现了我们在网页上交互效果,现在我们就来学习一下这些动画效果分解动作吧。...作为学习了网页设计初步一个进阶选修课。 动画实现思路都是通过连续改变物体属性值来实现效果。一般来说都是改变一个物体left,right,width,height,opacity....,放进一个人通用JS文件里movement.js: function getStyle(obj,attr) { if(obj.currentStyle){ return obj.currentStyle...JSON格式: {键:值,键:值} 完善后运动框架js:movement.js function getStyle(obj,attr) { if(obj.currentStyle){...startMove(li,{'width':400,'height':200,'opacity':100}); 效果果然是可以同时运动

    20.7K81

    CSS 奇思妙想 | 全兼容毛玻璃效果

    通过本文,你能了解到 最基本使用 CSS backdrop-filter 实现磨砂玻璃(毛玻璃)效果 在至今不兼容 backdrop-filter firefox 浏览器,如何利用一些技巧性操作...对于部分已经放弃了 IE PC 端业务而言,firefox 还是需要兼容,想要让使用 backdrop-filter 实现毛玻璃效果应用落地,firefox 兼容问题必须得解决。...上述效果完整代码,你可以戳这里: CodePen Demo -- 兼容 Firefox 复杂背景毛玻璃(磨砂玻璃)效果 总结一下 简单对上述内容进行一个总结: 你可以使用 backdrop-filter...对兼容浏览器非常简单实现毛玻璃(磨砂玻璃)效果 对于不兼容 backdrop-filter 浏览器,如果它只是简单背景,可以使用 background-attachment: fixed 配合...filter: blur() 进行模拟 对于 firefox 浏览器,你还可以使用 moz-element() 配合 filter: blur() 实现复杂背景毛玻璃效果 对于不兼容上述 3 种效果其他浏览器

    2.2K20

    精读《自由布局吸附线实现》

    自由布局吸附线效果如下图所示: 那么如何实现吸附线呢?我们先归纳一下吸附线特征: 正在拖动 box 与其他 box 在水平或垂直位置距离接近时,会显示对齐线。...我们还需要设置吸附阈值,否则所有鼠标位置都会产生吸附。所以当 source 所有位置最小距离大于吸附阈值时,就不产生吸附效果了。 产生吸附效果 吸附实现方式与拖拽实现方式有关。...box 向下位移,从而保证 box 在吸附时在垂直方向没有产生移动,这样吸附效果就实现了。...resize 时中间对齐线需要放大双倍吸附力 resize 与 drag 不同,设想鼠标拖动 box 下方边缘向下做 resize,此时除了组件移动外,还产生了组件高度变高效果,那么从上、中、下三段观察...+ snapX * 2 总结 我们梳理了吸附判断条件与吸附作用如何生效,以及 resize 时中间线吸附特殊处理逻辑。

    26560

    编写兼容JS代码

    前文介绍了:  1 DOM四个常用方法   2 使用DOM核心方法完成属性填充 本篇主要介绍在JS中需要注意几个地方,另外为了减小html与javascript耦合使用java进行onclick...但是在编写合格javascript代码时,需要注意:   1 平稳退化:保证在不支持js或者低版本浏览器也能正常访问   2 分离javascript:把html与javascript分离,有助于后期代码维护...  3 向后兼容性:确定老版本浏览器不会因为脚本禁止而死掉   4 性能考虑:确定脚本执行最优   编写优化代码   针对前一篇中相册代码,这里主要修改地方是把onclick方法删除,在页面加载时...,添加了很多安全性检查和兼容性,另外一个就是优化onload方法。   ...效果与前篇类似,全部代码如下: <!

    3.2K90

    Js 实现 marquee 效果

    使用RequestAnimationFrame,核心部分就是利用transformX实现位移 Js 逻辑写比较挫,还要想想怎么改进,或者有更好思路。...marquee要求是两段文字间隔能人为控制,所以用了两个重复p标签。...利用倍数来计算, 实际文字宽度 / 可视区域宽度得到3、3.5、4之类一个倍数,用这个倍数和 目前正在变化时拿到translateX值 / 可视区域宽度 假设是3倍,那么第二步计算出值如果正好是...3,说明文字末尾已经出现在‘可视区域’,此时➕一个系数x,就可以实现两段文字间隔(x按照实际想要间隔自行设置)。...第二段文字起始位置就是‘可视区域’宽度。 然后判断文字全部移出‘可视区域’判断 第二步骤 倍数 - 第一步倍数 < 一个允许范围误差值即可。

    8K20
    领券