博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
文档元素的悬浮效果--新手向
阅读量:7279 次
发布时间:2019-06-30

本文共 636 字,大约阅读时间需要 2 分钟。

hot3.png

在练习切图的时候, 发现playStation网站上的head部分始终停留在视口坐标为0的地方,

在自己数次试验后, 发现可以使用元素的文档坐标减去滚动条的坐标来实现悬浮的效果,

function xuanfu() {    var gundong = window.pageYOffset;    //获得滚动条的位置    var elt = $('#head');                //获取要悬浮的元素    var position = elt.offset();         //获得elt的文档坐标    position.top = gundong;              //设置elt的top属性坐标为滚动距离    elt.offset(position);                //设置元素的坐标}

调用的时候使用setInterval来持续调用这个函数, 但是有一个问题, 会造成很大的内存浪费

setInterval(xuanfu, 1);

使用了jquery的坐标设置方法,以后有好的解决办法,,再更改

查了下,,有一个比较好的解决办法,,使用window对象的scroll方法,,这也是jquery的方法

$(window).scroll(xuanfu);

在window对象的滚动条滚动时会触发scroll事件

转载于:https://my.oschina.net/u/2609069/blog/620929

你可能感兴趣的文章
php短信接口,免认证限制少的接口,手机短信,短信验证码
查看>>
linux 命令
查看>>
Go Timer实现原理剖析(轻松掌握Timer实现原理)
查看>>
django 内置标签和过滤器
查看>>
mysql主从复制
查看>>
C++多态的概念
查看>>
关于中文乱码问题的一些解决方案和经验
查看>>
Cisco 交换机命令全集
查看>>
Why Namespace? - 每天5分钟玩转 OpenStack(102)
查看>>
review what i studied `date` - 2017-4-19
查看>>
linux系统中如何查看日志 (常用命令)
查看>>
Java IO与NIO 学习
查看>>
SSH登录的时候显示一些实用信息
查看>>
CentOS 7 安装 MySQL
查看>>
Cisco 无线AP 初始化配置WPA加密日记
查看>>
java最最基础的题目(满分100分,笔试,不可上机):
查看>>
5月第1周中国五大顶级域名净增6,103个 美国净减7万个
查看>>
12月第3周全球域名商新增注册量20强:易名夺冠
查看>>
js伪3D图片翻页特效,带缩略图可无限屏
查看>>
从ORACLE RAC角度看跨数据中心的存储双活配置注意事项
查看>>