|
|
Модератор форума: JonMagon |
Сообщество uCoz Вебмастеру JavaScript, Flash и прочие технологии панель поиска в шапке при прокрутке вниз (принцип Яндекса) |
панель поиска в шапке при прокрутке вниз (принцип Яндекса) |
Встречал уже несколько сайтов реализовавшие интересную функцию: при прокрутке вниз, сверху появляется и отображается постоянно строка поиска или другая информация.
Самый простой пример у Яндекса. Хотя код там мудреный, попроще будет в М.видео. Кто знает как реализовать эту придумку. У М.Видео при прокрутке вниз, строка кода <div id="header_bar" class="header_bar"> сама меняется на <div id="header_bar" class="header_bar opened"> И соответственно есть разница в стилях слоя: .header_bar { top: -100px; width: 100%; z-index: 900; position: fixed; } .header_bar .opened { top:0; } Понятно, что дело в свойстве "top". Вопрос в том, каким это образом класс слоя header_bar меняется на header_bar opened ??!! Подозреваю, что не обошлось без javascript, но возможно здесь все проще. Если так, извиняюсь что сунулся не в тот раздел. |
Цитата (levinson) Вопрос в том, каким это образом класс слоя header_bar меняется на header_bar opened ??!! Код <script> $('#header_bar').addClass('opened'); </script> Обратное "преобразование": Код <script> $('#header_bar').removeClass('opened'); </script> Вы полюбили меня. Здесь я. (с)
Сообщение отредактировал Ferro7 - Воскресенье, 12 Май 2013, 02:35:43
|
Цитата (Ferro7) <script> $('#header_bar').addClass('opened'); </script> А как же событие которое вызывает скрипт? т.е. если скролл опускается ниже 200px, то выполняй скрипт преобразования. Иначе выполняй скрипт обратного преобразования. Там оператор "if" видимо где то стоит? Как то ведь должно событие распознаваться? Добавлено (16 Май 2013, 23:01:01) --------------------------------------------- Нашел принцип работы скрипта фиксированной панели от fflesh`a . Спасибо ему, отличный парень! Правда ответить в теме там не получается Пробовал применить у себя, но чуда не происходит класс header_bar не меняется на header_bar opened. Мало что я понимаю в javascript`ах. Нужна помощь, помогите найти ошибку. JavaScript: Код <script type="text/javascript"> $(document).ready(function(){ var panel=$('#header_bar'),pos=panel.offset(); $(window).scroll(function(){ if($(this).scrollTop() > pos.top - 10){ panel.removeClass('default').addClass('opened'); }else if($(this).scrollTop() <= pos.top && panel.hasClass('opened')){ panel.removeClass('opened').addClass('default'); }};); };); </script> Код .header_bar { position: fixed; top: -100px; z-index: 900; width: 100%; } .header_bar.opened { top: 0px; } .header_bar.bar_in { width: 100%; min-width: 1000px; min-height: 50px; } .header_bar.panel { width: 100%; min-height: 50px; background: none repeat scroll 0% 0% rgb(255, 255, 255); font-size: 11px; line-height: 14px; } .header_bar.shdw { width: 1230px; height: 4px; margin: 0px auto; font-size: 1px; line-height: 1px; background: url("/img/mv12/header_bar_shdw.png") no-repeat scroll center top transparent; } Код <div id="header_bar" class="header_bar"><div class="bar_in"> <div class="panel">привет. Я классная верхняя панель. </div><div class="shdw"></div> </div></div> Сообщение отредактировал levinson - Четверг, 16 Май 2013, 23:14:04
|
levinson, в скрипте заменить default на header_bar, в стилях убрать top: -100px;
|
В скрипте выше сравниваем положение релативного/статичного блока, с высотой прокрутки. Как в яндексе, блок поиска изначально статичен, но как только упирается в верхний край, становится фиксированным.
Если же тебе просто нужно показать/скрыть при определенной высоте скролла, то проще: Код <style type="text/css"> #header_bar{ display:none; position:fixed; width:100%; min-width:1000px; height:50px; z-index:900; } #header_bar.opened{ display:block; } </style> Код <div id="header_bar" class="header_bar"><div class="bar_in"> <div class="panel">привет. Я классная верхняя панель. </div> <div class="shdw"></div> </div></div> Код <script type="text/javascript"> $(document).ready(function(){ var panel=($(window).scrollTop()>100)?$('#header_bar').addClass('opened'):$('#header_bar'); $(window).scroll(function(){ if($(this).scrollTop() > 100 && !panel.hasClass('opened')){ panel.addClass('opened'); }else if($(this).scrollTop() < 100 && panel.hasClass('opened')){ panel.removeClass('opened'); }}); }); </script> Где: 100 - высота прокрутки на которой будет показываться/скрываться блок. Всё написанное выше - моё личное мнение и на абсолютную правоту не претендует.
Есть вопросы лично ко мне - пиши сюда: http://likbezz.ru/forum/8 Сообщение отредактировал fflesh - Пятница, 17 Май 2013, 07:08:48
|
Цитата (fflesh) нужно показать/скрыть при определенной высоте скролла Но почему то скрипт не выполняется. Понять не могу что к чему, уже каждую букву изучил, должен же работать! Вставил в пустой файл (думал конфликтует с чем), все равно не работает! Сообщение отредактировал levinson - Пятница, 17 Май 2013, 12:37:19
|
|
Извиняюсь за запудривание мозгов!!!
Drinko, спасибо, когда ты спросил про doctype, до меня дошло, что я умолчал, что все это я проделывал в локальном файле! Следовательно библиотека JQuery не была подключена!!! [b]fflesh,[/b] спасибо за код, ты как всегда оперативен и точен! Еще раз извиняюсь, за лишние заморочки. Сообщение отредактировал levinson - Суббота, 18 Май 2013, 22:24:02
|
| |||
| |||