js頁面滾動時層智能浮動定位實現(jQuery/MooTools)

2012-11-4 15:53:25 | tags jQuery  MooTools   | views

一、應用展示

關于層的智能浮動效果早在幾年前我就在國外的一些個人網站的垂直導航上見到了,現在似乎在國內一些商業網站上也屢見此效果,例如淘寶網的搜索結果頁的排序水平條,在默認狀態下,滾動條跟隨頁面滾動,如下:
淘寶網搜索頁排序水平條 張鑫旭-鑫空間-鑫生活

隨著頁面向下滾動,當此水平條接觸瀏覽器的上邊緣時,水平條獨立出來,不跟隨滾動條滾動了,如下圖所示:
淘寶網搜索頁水平條 張鑫旭-鑫空間-鑫生活

類似的效果在新浪微博上也有:
新浪微博上智能定位層 張鑫旭-鑫空間-鑫生活

當頁面滾動,新動態提示開始要淡出瀏覽器窗口的時候,其浮動于瀏覽器窗口的最上沿顯示,如下圖所示:
新浪微博智能浮動層 張鑫旭-鑫空間-鑫生活

此效果實現原理其實很簡單,本文就將展示其實現。

二、實現原理

默認狀態就是默認狀態,什么事情也不用做,定位是absolute也好,static也好,都ok。關鍵是當瀏覽器滾動的時候,對象(要浮動的層)要移除瀏覽器界面視區的時候,修改其position屬性,讓其浮動在窗口的上沿顯示就可以了。最好的position屬性就是fixed了,可以在IE6+和其他瀏覽器下浮動層平滑固定定位,由于IE6前輩不支持fixed屬性,所以,后退一步,使用absolute屬性代替,但是會有副作用——滾動不平滑。但,這也是沒有辦法的事情了。

現在關鍵就是如何判斷當前層與瀏覽器窗口的上邊緣接觸呢?當浮動層與瀏覽器窗口上邊緣接觸的一瞬間,其頁面垂直偏移值與頁面的滾動高度其實是一致的,所以,用這個進行判斷就OK了,但是,如何獲得頁面上元素距離頁面的垂直距離呢?純粹的js代碼獲得此值還是比較麻煩的,好在JavaScript庫幫我們解決了這些工作,所以,我們的工作其實就很平坦,下面就將展示如何在jQuery庫以及MooTools庫下實現該效果。

三、jQuery下的層的智能浮動

方法代碼如下:

$.fn.smartFloat = function() {    var position = function(element) {        var top = element.position().top, pos = element.css("position");        $(window).scroll(function() {            var scrolls = $(this).scrollTop();            if (scrolls > top) {                if (window.XMLHttpRequest) {                    element.css({                        position: "fixed",                        top: 0                    });                } else {                    element.css({                        top: scrolls                    });                }            }else {                element.css({                    position: "absolute",                    top: top                });            }        });    };    return $(this).each(function() {        position($(this));    });};

調用很簡單,直接一行代碼就ok了,例如下面:

$("#float").smartFloat();

妥妥兒的,就一小段綁定就實現了id為float的標簽有了智能浮動功能,效果描述就是:當id為float的元素在滾動的時候與瀏覽器上邊緣接觸時就不會再跟隨滾動條滾動了。

您可以狠狠地點擊這里:

四、MooTools下的層的智能浮動

與jQuery實現一樣,MooTools庫下也已經將此方法包裝了起來,代碼如下:

使用也是非常的簡單,就一句代碼,同樣以id為float的標簽舉例,代碼如下:

您可以狠狠地點擊這里:

發表評論:

◎歡迎參與討論,請在這里發表您的看法、交流您的觀點。

手机捕鱼怎么下载
百人炸金花游戏开发 注册就送彩金真实网站 大乐透前后区胆拖投注 最新注册账号送体验金的平台 开奖公告快乐时时10分钟赚10万 ag电子游戏怎么下载 模拟投注器 快乐时时计划 北京pk拾全天连中计划 金旺娱乐 下载app送1888彩金 重庆时时彩组六走势图 北京pk拾历史开奖结果 重庆时时51计划 258彩票下载app 赔率