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

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

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

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

Код (CSS)



Код (HTML)



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

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



Код (JavaScript)



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


Комментарии (9)
Гость 2011-11-13 в 12:30Спам
Вы напишите что куда расставлять, а то 100 попыток можно сделать и промазать!!!
-1
Денис Абдуллин 2011-11-13 в 14:56Спам
Там, где написано куда вставлять, туда и надо вставлять, а где не написана - значит, хоть куда,. Понятно, что <div'ки> всякие нужно между <body> и <body>
1
Александр Ильин 2011-11-13 в 15:31Спам
А у меня уже получалось, только я сделал куда намного проще на CSS.
0
Денис Абдуллин 2011-11-13 в 18:20Спам
Да, но тут-то прикол в том, что при определенной позиции скроллинга меняется CSS, на IE вообще ничего не работает, так что не вариант
0
Александр Ильин 2011-11-14 в 21:02Спам
Да, задумка хорошая)
1
Гость 2011-11-15 в 18:18Спам
Демка не работает
0
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>
0
Денис Абдуллин 2011-11-28 в 12:25Спам
Есть еще не один способ, Влад
0
Гость 2013-03-03 в 14:45Спам
Демо не работает
0
Чтобы оставить комментарий или отзыв под этой публикацией, войдите.