Полезные статьи о разработке сайтов от вебмастера
Категория:
Плавающий блок может сделать интерфейс Вашего сайта еще удобнее, чем он есть сейчас! Например, у Вас двухколоночный дизайн сайта, меню и контент соответственно. Допустим, у Вас есть страница, где в виде контента располагается анкета для заполнения. Очень большая и длинная анкета с миллионом вопросов. А в Колонке с меню расположены управляющие кнопки «Сохранить анкету» и «Отмена». Когда пользователь будет отвечать на последние вопросы страницы, а для этого он прокрутит страницу максимально вниз, он потеряет из виду кнопки управления, так как они останутся сверху страницу. Неудобно! Пользователю придется листать всю анкету назад после заполнения, чтобы сохранить ответы.
А представьте, что блок с кнопками поехал вниз вместе с пользователем, и когда тот заполнил все вопросы анкеты, ему не нужно будет пролистывать всю её назад, чтобы нажать «Сохранить анкету», кнопки будут в зоне видимости, так как «приехали» вниз страницы вместе с пользователем.
Для того, чтобы сделать блок плавающим по горизонтали мы будем использовать css свойство position, а именно его значение fixed. Оно зафиксирует блок на странице, там, где мы укажем, вне зависимости от прокрутки страницы.
А выставлять position: fixed, мы будем в тот момент, когда пользователь прокрутил страницу до верхнего края плавающего блока. Добавим еще зазор в 10px между верхней границей окна и блока, чтобы это смотрелось эстетично.
И Все наши действия мы помещаем в событие прокрутки окна $(window).scroll(). В результате у нас получается следующий код:
<script type="text/javascript"> $(window).load(function() { var block = $('#yourblock'); // ID Вашего плавающего блока var position = block.position(); var windowpos = 0; $(window).scroll(function() { wintop = $(window).scrollTop(); if(wintop<position.top+10){ block.css({position: 'relative', top: '0px', left: '0px'}); } else { block.css({position: 'fixed', top: '10px', left: position.left+'px'}); } }); }); </script>
Данные строчки необходимо вставить в раздел <head></head> Вашей страницы. Подобные блоки сейчас можно встретить на многих сайтах, правда обычно в них содержится реклама. По понятным причинам реклама в плавающих блоках – очень эффективна
Кстати, очень интересно:
Данный блог создан с целью помочь, как начинающему вебмастеру, так и опытному разработчику, в решении проблем возникающих при разработке сайтов. Здесь Вы прочитаете полезные статьи о том, как грамотно произвести SEO оптимизацию своего сайта, и найдёте важные исследования в сфере интернет-маркетинга. Научитесь писать собственные компоненты и модули для известных CMS, а также узнаете интересные методы работы с Фреймворками, CSS, HTML, jQuery и PHP. Из записей блога вы поймёте как грамотно разрабатывать макеты сайтов и что такое валидная вёрстка. БЛОГZOR – поможет Вам стать web-Гуру и понять тонкости веб-мастеринга.
Комментариев к записи: 1
7 Ноябрь 2013 в 12:20 пп
спасибо