文档元素的悬浮效果--新手向

在练习切图的时候, 发现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事件