Предлагаю вашему вниманию интересную функцию определения размеров экрана и небольшой пример ее использования
Кроссбраузерная функция для определения размеров рабочей области экрана и размеров всего документа имеет вид:
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; });
Вписываете в нужные ветки ваши функции обработчики и радуетесь жизни :)
Разработка сайта
Подайте заявку на разработку сайта на базе готового решения от компании 1С-Битрикс или одного из партнеров компании. Максимально подробно опишите, чему будет посвящен сайт, если это интернет-магазин - что он будет продавать, нужна ли мультиязычность, будут ли разные типы цен (розница, опт, крупный опт), будет ли интеграция с 1С, будет ли выгрузка товаров на различные торговые площадки...
Сопровождение сайта
Вы можете подать заявку на сопровождение вашего сайта на базе 1С-Битрикс. Сопровождение включает в себя: проверка актуальности обновлений сайта, проверка актуальности резервной копии, консультации по сайту. Опишите в заявке, какие еще объемы планируются на сопровождении и на какой срок вы планируете заключить договор на сопровождение - мы подберем подходящий вам бюджет на сопровождение
Работы по сайту
Вы можете подать заявку на выполнение определенного объема работ по сайту. Опишите в заявке объем работ. Это может быть разработка какого-то нового функционала, доработки по имеющемуся функционалу, доработки под требования сео-специалистов. На основании заявки вам будет сформирован бюджет работ, а также названы сроки на выполнение тех или иных работ.