Пишем подвижную панельку как на Яндексе

152011-11-1227619Денис Абдуллин

На днях делал дизайн для одного портала, после того как я написал шапку нужно было придумать меню. Предполагалось, что там будут кнопки управления профилем, кнопка подъема вверх и форма поиска. Так как эти кнопки нужны всегда, а каждый раз подниматься неудобно я решил сделать их подвижными, в тоже время дизайн этого меню не должен быть изменен и из-за него что либо другое так же не должно быть изменено. Немного поразмышляв я вспомнил, что панелька Яндекса полностью удовлетворяет требованиям и нужно просто сделать такую же. Незабываем смотреть демо.

Для начала я создал саму панельку, её стили.

Код (CSS)

Код (HTML)

Теперь нужно заставить её двигаться, для этого нам потребуется jQuery, у сайтов на uCoz он уже есть, для других:

Код (Между <HEAD> и </HEAD>)

Код (JavaScript)

Монтируйте скрипт под свой сайт и наслаждайтесь.

Создать сайт в uKit Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!

Комментарии (9)

Порядок вывода комментариев:

Гость 2013-03-03 в 14:45 / МатериалСпам

Демо не работает

Денис Абдуллин 2011-11-28 в 12:25 / МатериалСпам

Есть еще не один способ, Влад

Wlad Zubairow 2011-11-28 в 09:27 / МатериалСпам

Можно же так ?
<script>
$(document).ready(function(){
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 164 ) {
$("#movable panel").stop().css({'top' : '0','position' : 'fixed'});
} else {
$("#movable panel").stop().css({'top' : '124px','position' : 'absolute'});
}
});
});
});
</script>

Александр Ильин 2011-11-14 в 21:02 / МатериалСпам

Да, задумка хорошая)

Гость 2011-11-15 в 18:18 / МатериалСпам

Демка не работает

Денис Абдуллин 2011-11-13 в 18:20 / МатериалСпам

Да, но тут-то прикол в том, что при определенной позиции скроллинга меняется CSS, на IE вообще ничего не работает, так что не вариант

Александр Ильин 2011-11-13 в 15:31 / МатериалСпам

А у меня уже получалось, только я сделал куда намного проще на CSS.

Денис Абдуллин 2011-11-13 в 14:56 / МатериалСпам

Там, где написано куда вставлять, туда и надо вставлять, а где не написана - значит, хоть куда,. Понятно, что <div'ки> всякие нужно между <body> и <body>

Гость 2011-11-13 в 12:30 / МатериалСпам

Вы напишите что куда расставлять, а то 100 попыток можно сделать и промазать!!!

-1

Чтобы оставить комментарий или отзыв под этой публикацией, войдите или зарегистрируйтесь.