【JQuery小技巧】各瀏覽器對於滾動條位置的不同判定

各瀏覽器對於scrollTop()測量的滾動條位置是不同的,IE、火狐、Opera要用$("html").scrollTop();  而蘋果、谷歌要用$("body").scrollTop();

 

例如,根據滾動條位置來改變小方塊的position方式:

$(document).ready(function () {
    ////////////////左右LOGO的上下位置//////////////////////
    var bodyH = $("body").height();
    $(window).bind("scroll resize", function () {
        var scrollH;
        if (($.browser.msie) || ($.browser.mozilla) || ($.browser.opera)) {
            scrollH = $("html").scrollTop();
        } else {
            scrollH = $("body").scrollTop();
        }
        var winH = $(window).height();
        if (scrollH >= 690) {
            $("#logo_l").css({ "position": "fixed", "top": "15px" });
        } else {
            $("#logo_l").css({ "position": "absolute", "top": "705px" });
        };
        if (scrollH >= bodyH - winH - 216) {
            $("#logo_r").css({ "position": "absolute", "top": (bodyH - 115 - 20 - 216) + "px" }); //115是塊高,20是塊底距窗口底距離,216是窗口底底距頁底距離。
        } else if (scrollH <= 1100 - winH + 115 + 20) {
            $("#logo_r").css({ "position": "absolute", "top": "1100px" });
        } else {
            $("#logo_r").css({ "position": "fixed", "top": (winH - 115 - 20) + "px" });
        };
    });
});


 

發佈了12 篇原創文章 · 獲贊 1 · 訪問量 6萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章