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

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

12.11.201120599

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

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

Код (CSS)



Код (HTML)



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

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



Код (JavaScript)



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



Сохраните в социальную сеть
Комментарии (9)
Гость 13.11.2011 в 12:30Спам
Вы напишите что куда расставлять, а то 100 попыток можно сделать и промазать!!!
-1
Там, где написано куда вставлять, туда и надо вставлять, а где не написана - значит, хоть куда,. Понятно, что <div'ки> всякие нужно между <body> и <body>
1
А у меня уже получалось, только я сделал куда намного проще на CSS.
0
Да, но тут-то прикол в том, что при определенной позиции скроллинга меняется CSS, на IE вообще ничего не работает, так что не вариант
0
Да, задумка хорошая)
1
Гость 15.11.2011 в 18:18Спам
Демка не работает
0
Wlad Zubairow 28.11.2011 в 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>
0
Есть еще не один способ, Влад
0
Гость 03.03.2013 в 14:45Спам
Демо не работает
0
Чтобы оставить комментарий под этой публикацией,
зарегистрируйтесь или войдите.
Рейтинг лучших сервисов для самостоятельного создания сайта.
Лучшие конструкторы
Легко! Если пользоваться нашими советами.
Создать сайт