Кроссбраузерная функция для определения размеров рабочей области экрана и размеров всего документа имеет вид:
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;
});
Вписываете в нужные ветки ваши функции обработчики и радуетесь жизни :)
