文檔元素的懸浮效果--新手向

在練習切圖的時候, 發現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事件