• Страница 1 из 1
  • 1
Модератор форума: JonMagon  
Сообщество uCoz » Вебмастеру » JavaScript, Flash и прочие технологии » панель поиска в шапке при прокрутке вниз (принцип Яндекса)
панель поиска в шапке при прокрутке вниз (принцип Яндекса)
levinson
Сообщений: 123
Репутация: 29

Сообщение # 1 | 18:20:04 11 Май 2013
Встречал уже несколько сайтов реализовавшие интересную функцию: при прокрутке вниз, сверху появляется и отображается постоянно строка поиска или другая информация.
Самый простой пример у Яндекса. Хотя код там мудреный, попроще будет в М.видео. Кто знает как реализовать эту придумку.
У М.Видео при прокрутке вниз, строка кода <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, но возможно здесь все проще. Если так, извиняюсь что сунулся не в тот раздел.
Ferro7
Сообщений: 285
Репутация: 230

Сообщение # 2 | 02:31:16 12 Май 2013
Цитата (levinson)
Вопрос в том, каким это образом класс слоя header_bar меняется на header_bar opened ??!!


Код
<script>
$('#header_bar').addClass('opened');
</script>


Обратное "преобразование":

Код
<script>
$('#header_bar').removeClass('opened');
</script>
Вы полюбили меня. Здесь я. (с)
Сообщение отредактировал Ferro7 - Воскресенье, 12 Май 2013, 02:35:43
levinson
Сообщений: 123
Репутация: 29

Сообщение # 3 | 23:01:01 16 Май 2013
Цитата (Ferro7)
<script>
$('#header_bar').addClass('opened');
</script>
Это есть команда к преобразованию. Круто кстати, спасибо.
А как же событие которое вызывает скрипт? т.е. если скролл опускается ниже 200px, то выполняй скрипт преобразования. Иначе выполняй скрипт обратного преобразования.
Там оператор "if" видимо где то стоит? Как то ведь должно событие распознаваться?

Добавлено (16 Май 2013, 23:01:01)
---------------------------------------------
Нашел принцип работы скрипта фиксированной панели от fflesh`a . Спасибо ему, отличный парень! Правда ответить в теме там не получается dry
Пробовал применить у себя, но чуда не происходит класс 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
Drinko
Сообщений: 909
Репутация: 773

Сообщение # 4 | 01:52:30 17 Май 2013
levinson, в скрипте заменить default на header_bar, в стилях убрать top: -100px;
Улыбаемся и голосуем, улыбаемся и голосуем!
fflesh
Сообщений: 1784
Репутация: 1314

Сообщение # 5 | 02:16:27 17 Май 2013
В скрипте выше сравниваем положение релативного/статичного блока, с высотой прокрутки. Как в яндексе, блок поиска изначально статичен, но как только упирается в верхний край, становится фиксированным.
Если же тебе просто нужно показать/скрыть при определенной высоте скролла, то проще:
Код
<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
levinson
Сообщений: 123
Репутация: 29

Сообщение # 6 | 12:36:13 17 Май 2013
Цитата (fflesh)
нужно показать/скрыть при определенной высоте скролла
Да, именно этого я и добиваюсь.
Но почему то скрипт не выполняется.
Понять не могу что к чему, уже каждую букву изучил, должен же работать! Вставил в пустой файл (думал конфликтует с чем), все равно не работает!
Сообщение отредактировал levinson - Пятница, 17 Май 2013, 12:37:19
Drinko
Сообщений: 909
Репутация: 773

Сообщение # 7 | 18:10:37 17 Май 2013
levinson, <!DOCTYPE> указан (Панель Управления -> Общие настройки)?
Улыбаемся и голосуем, улыбаемся и голосуем!
Davides
Сообщений: 21
Репутация: -5

Сообщение # 8 | 13:39:45 18 Май 2013
А можно все проще сделать, к классу или индефикатору своего меню прописать position:fixed; и все)
levinson
Сообщений: 123
Репутация: 29

Сообщение # 9 | 18:40:07 18 Май 2013
Извиняюсь за запудривание мозгов!!!
Drinko, спасибо, когда ты спросил про doctype, до меня дошло, что я умолчал, что все это я проделывал в локальном файле! Следовательно библиотека JQuery не была подключена!!!
[b]fflesh,[/b] спасибо за код, ты как всегда оперативен и точен!
Еще раз извиняюсь, за лишние заморочки.
Сообщение отредактировал levinson - Суббота, 18 Май 2013, 22:24:02
Сообщество uCoz » Вебмастеру » JavaScript, Flash и прочие технологии » панель поиска в шапке при прокрутке вниз (принцип Яндекса)
  • Страница 1 из 1
  • 1
Поиск: