Функция кроссбраузерного определения размеров браузера

Предлагаю вашему вниманию интересную функцию определения размеров экрана и небольшой пример ее использования

Кроссбраузерная функция для определения размеров рабочей области экрана и размеров всего документа имеет вид:

function  getPageSize(){
    var xScroll, yScroll;

    if (window.innerHeight && window.scrollMaxY) {
        xScroll = document.body.scrollWidth;
        yScroll = window.innerHeight + window.scrollMaxY;
    } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
        xScroll = document.body.scrollWidth;
        yScroll = document.body.scrollHeight;
    } else if (document.documentElement && document.documentElement.scrollHeight > document.documentElement.offsetHeight){ // Explorer 6 strict mode
        xScroll = document.documentElement.scrollWidth;
        yScroll = document.documentElement.scrollHeight;
    } else { // Explorer Mac...would also work in Mozilla and Safari
        xScroll = document.body.offsetWidth;
        yScroll = document.body.offsetHeight;
    }

    var windowWidth, windowHeight;
    if (self.innerHeight) { // all except Explorer
        windowWidth = self.innerWidth;
        windowHeight = self.innerHeight;
    } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
        windowWidth = document.documentElement.clientWidth;
        windowHeight = document.documentElement.clientHeight;
    } else if (document.body) { // other Explorers
        windowWidth = document.body.clientWidth;
        windowHeight = document.body.clientHeight;
    }

    // for small pages with total height less then height of the viewport
    if(yScroll < windowHeight){
        pageHeight = windowHeight;
    } else {
        pageHeight = yScroll;
    }

    // for small pages with total width less then width of the viewport
    if(xScroll < windowWidth){
        pageWidth = windowWidth;
    } else {
        pageWidth = xScroll;
    }

    return {'page':{'width':pageWidth,'height':pageHeight},'window':{'width':windowWidth,'height':windowHeight}}
}

Рассмотрим использование функции на примере прилипающего к верхнему и нижнему краю экрана меню

Верхнее меню помещаем в контейнер с id="header-menu", а нижнее - в контейнер с id="bottommemucontainer"

Производим базовое заполнение JS-переменных (document.ready):

var TopMenu = $('#header-menu');
    var BottomMenu = $('#bottommemucontainer');
    var TopMenuOffset = $(TopMenu).offset().top;
    var FooterOffsetTop = $(BottomMenu).offset().top;
    var ScreenSize = getPageSize();

Далее делаем проверку: если общий размер документа больше положения нижнего меню (т.е. нижнее меню не помещается в экран), то делаем склейку нижнего меню и нижней части экрана:

if(ScreenSize.page.height>ScreenSize.window.height){
        if(ScreenSize.window.height < FooterOffsetTop){
            $(BottomMenu).css({
                'position':'fixed',
                'z-index':'9999',
                'bottom':'5px'
            });
            $('#floaterMenuBg').show();
        }
    }

floaterMenuBg - подложка под меню, с перекрытием фонов

Дальше реализуем механизм прилипания (и отлипания, соответственно) верхнего и нижнего меню при скроллинге страницы:

    $(window).scroll(function(event){
        var st = $(this).scrollTop();

        if(st > TopMenuOffset){
            $(TopMenu).css({
                'position':'fixed',
                'z-index':'9999',
                'top':'-10px'
            });
        } else {
            $(TopMenu).css({'position':'relative','top':'auto'});
        }

        if(st+ScreenSize.window.height < FooterOffsetTop){
            $(BottomMenu).css({
                'position':'fixed',
                'z-index':'9999',
                'bottom':'5px'
            });
            $('#floaterMenuBg').show();
        } else {
            $(BottomMenu).css({
                'position':'relative',
                'z-index':'9999',
                'bottom':'auto'
            });
            $('#floaterMenuBg').hide();
        }
    });

Вот такой вот вышел простенький скрипт. Если же вам нужно показывать какие-то только отдельные блоки в зависимости от того, в какую сторону прокрутили мышку, можно воспользоваться кодом:

var lastScrollTop = 0;
    $(window).scroll(function(event){
        var st = $(this).scrollTop();
        
        if (st > lastScrollTop){
            console.debug('down');
        } else {
            console.debug('up');
        }
        lastScrollTop = st;
    });

Вписываете в нужные ветки ваши функции обработчики и радуетесь жизни :)