Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: отслеживание работы сролла

 PHP.SU

 Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (1): [1]   

> Описание: яндекс
Поиск в теме | Версия для печати
LEONeso
Отправлено: 26 Августа, 2011 - 13:36:05
Post Id



Посетитель


Покинул форум
Сообщений всего: 499
Дата рег-ции: Янв. 2010  
Откуда: Россия, Москва


Помог: 1 раз(а)
Здравствуйте, меня интересует, как так Яндекс смогли сделать отслеживание позиции скролла браузера и реагировать на данное событие, реагируют они просто "фиксируют поисковое поле".


-----
Для некоторых лучший способ написать что-нибудь осмысленное - это сесть _опой на клавиатуру.
 
 Top
EuGen Администратор
Отправлено: 26 Августа, 2011 - 13:40:22
Post Id


Профессионал


Покинул форум
Сообщений всего: 9095
Дата рег-ции: Июнь 2007  
Откуда: Berlin


Помог: 707 раз(а)
Давно не заходил на Яндекс.
Зашел, проверил - ничего там не фиксируется.
Не это имеете ввиду?
http://www[dot]quirksmode[dot]org/css/position[dot]html
- там есть возможность выбрать position для элемента. Нужный эффект возникает когда он fixed


-----
Есть в мире две бесконечные вещи - это Вселенная и человеческая глупость. Но насчет первой .. я не уверен.
 
 Top
LEONeso
Отправлено: 26 Августа, 2011 - 13:49:28
Post Id



Посетитель


Покинул форум
Сообщений всего: 499
Дата рег-ции: Янв. 2010  
Откуда: Россия, Москва


Помог: 1 раз(а)
EuGen пишет:
Давно не заходил на Яндекс.
Зашел, проверил - ничего там не фиксируется.
Не это имеете ввиду?
http://www[dot]quirksmode[dot]org/css/position[dot]html
- там есть возможность выбрать position для элемента. Нужный эффект возникает когда он fixed


Требуется ввести в поиск запрос и уже в поисковой выдаче крутануть скролл и посмотреть наверх.


-----
Для некоторых лучший способ написать что-нибудь осмысленное - это сесть _опой на клавиатуру.
 
 Top
EuGen Администратор
Отправлено: 26 Августа, 2011 - 13:53:44
Post Id


Профессионал


Покинул форум
Сообщений всего: 9095
Дата рег-ции: Июнь 2007  
Откуда: Berlin


Помог: 707 раз(а)
Посмотрел. Так а в чем разница с тем, что я привел? Разве что они "открепляют" полосу с поиском от ее первоначальной формы.


-----
Есть в мире две бесконечные вещи - это Вселенная и человеческая глупость. Но насчет первой .. я не уверен.
 
 Top
LEONeso
Отправлено: 26 Августа, 2011 - 14:00:27
Post Id



Посетитель


Покинул форум
Сообщений всего: 499
Дата рег-ции: Янв. 2010  
Откуда: Россия, Москва


Помог: 1 раз(а)
EuGen пишет:
Посмотрел. Так а в чем разница с тем, что я првел? Разве что они "открепляют" полосу с поиском от ее первоначальной формы.

изначально поле position:absolute; после того как прокручен Х пиксель, происходит воздействие на поле.

имею поле div #header

написал jq код:
CODE (javascript):
скопировать код в буфер обмена
  1.  
  2. $(window).scroll(function(headerTop) {
  3.         var objHeader = $("#header");
  4.         var header = $(objHeader).position().top;
  5.         if(header > "40") {
  6.                 $(objHeader).animate({"top":"-40px","position":"fixed"},300);
  7.         } else {
  8.                 $(objHeader).animate({"top":"0px","position":"absolute"},300);
  9.         }
  10. });
  11.  


стиль:
CODE (htmlphp):
скопировать код в буфер обмена
  1. #header {
  2. position:fixed;
  3. top:0;
  4. left:0;
  5. width:100%;
  6. height:70px;
  7. background:#304a00;
  8. overflow:hidden;
  9. color:#fff;
  10. z-index:300;
  11. }


работает криво.


-----
Для некоторых лучший способ написать что-нибудь осмысленное - это сесть _опой на клавиатуру.
 
 Top
EuGen Администратор
Отправлено: 26 Августа, 2011 - 14:29:20
Post Id


Профессионал


Покинул форум
Сообщений всего: 9095
Дата рег-ции: Июнь 2007  
Откуда: Berlin


Помог: 707 раз(а)
Вот что я придумал по этому поводу "сходу" - думаю, принцип понятен.
CODE (html):
скопировать код в буфер обмена
  1. <div style='position: absolute; top: 1px; left: 1px; border: 1px solid #cc0000; background: #cccc00;'>
  2. <div id='scroller' style='margin:10px; position: relative; top: 0px; left: 0px; border: 1px solid #00cc00;'>
  3. <table>
  4. <tr>
  5. <td>I'm yandex:</td><td><input type='text' name='search'></td>
  6. </tr>
  7. </table>
  8. </div>
  9. </div>
  10. <br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-
  11. <script type='text/javascript'>
  12.     window.onscroll=function()
  13.     {
  14.         if(document.body.scrollTop)
  15.         {
  16.            document.getElementById('scroller').style.position='fixed';
  17.            document.getElementById('scroller').style.top='1px';
  18.            document.getElementById('scroller').style.left='1px';
  19.         }
  20.         else
  21.         {
  22.            document.getElementById('scroller').style.position='relative';
  23.         }
  24.     }
  25. </script>

Насчет кроссбраузерности - не проверял, только на FF.


-----
Есть в мире две бесконечные вещи - это Вселенная и человеческая глупость. Но насчет первой .. я не уверен.
 
 Top
LEONeso
Отправлено: 26 Августа, 2011 - 14:53:43
Post Id



Посетитель


Покинул форум
Сообщений всего: 499
Дата рег-ции: Янв. 2010  
Откуда: Россия, Москва


Помог: 1 раз(а)
EuGen пишет:
Вот что я придумал по этому поводу "сходу" - думаю, принцип понятен.
...
Насчет кроссбраузерности - не проверял, только на FF.


Спасибо... помогло, моя ошибка была в том, что нужно было проверять тело документа, а не шапку.

CODE (javascript):
скопировать код в буфер обмена
  1.  
  2. $(window).scroll(function(headerTop) {
  3.         var objHeader = $("#header").css({"position":"absolute"});//если js включен, то абсолютим
  4.         var bodyScrollTop = $("body").scrollTop();//глядим, чё там сверху
  5.         if(bodyScrollTop > "40") {
  6.                 $(objHeader).css({"top":"-40px","position":"fixed"});//насилие
  7.         } else {
  8.                 $(objHeader).css({"top":"0px","position":"absolute"});//насилие
  9.         }
  10. });
  11. //яндекс - зло
  12.  

(Добавление)
Да... в FireFox, IE9 и Opera не пашет
выдает bodyScrollTop == 0 всегда

но chrome и safari работают Хм


-----
Для некоторых лучший способ написать что-нибудь осмысленное - это сесть _опой на клавиатуру.
 
 Top
SAD
Отправлено: 26 Августа, 2011 - 15:44:35
Post Id



Постоянный участник


Покинул форум
Сообщений всего: 2508
Дата рег-ции: Май 2009  
Откуда: Днепропетровск, Украина


Помог: 75 раз(а)
покопайте js yandex' а.
 
 Top
LEONeso
Отправлено: 26 Августа, 2011 - 15:50:44
Post Id



Посетитель


Покинул форум
Сообщений всего: 499
Дата рег-ции: Янв. 2010  
Откуда: Россия, Москва


Помог: 1 раз(а)
гениальность браузеров:
ch, saf
CODE (javascript):
скопировать код в буфер обмена
  1. var bodyScrollTop = $("body").scrollTop();


ff, opera
CODE (javascript):
скопировать код в буфер обмена
  1. var bodyScrollTop = $("html").scrollTop();


ie
error: it is time to remove the browser
(Добавление)
Нашел выход для всех браузеров, кроме IE... причем - это результат мозгового шутрма и тыка =)

CODE (javascript):
скопировать код в буфер обмена
  1.         var bodyScrollTop = $(this).scrollTop();
  2.         //console.log(".scrollTop("+bodyScrollTop+");");

т.е. мы конкретно не выбираем какой объект... jquery сам его выберет будь то body или html.

IE9 - я хочу подчеркнуть главное, а это EI9 не может с этим работать.


-----
Для некоторых лучший способ написать что-нибудь осмысленное - это сесть _опой на клавиатуру.
 
 Top
LEONeso
Отправлено: 27 Августа, 2011 - 16:38:39
Post Id



Посетитель


Покинул форум
Сообщений всего: 499
Дата рег-ции: Янв. 2010  
Откуда: Россия, Москва


Помог: 1 раз(а)
Я человек не жадный поделюсь с вами кодом, долго мучался... дорабатывал код для моей цели:

1. Крутим сролл, получаем результат в виде фиксации формы (плавный).
2. Нажимаем на пустое место шапки, получаем анимацию выдвижения формы.
3. Шапка теряет курсор, получаем анимацию задвигающийся шапки с фиксацией формы.
4. Шапка не анимируется в случае нажатии по форму или её кнопкам.

Итог: jQuery
CODE (javascript):
скопировать код в буфер обмена
  1. $(document).ready(function(){
  2. var doc = $(document);
  3. var objHeader = $("#header");
  4.         doc.scroll(function() {
  5.         objHeader.css({"position":"absolute"});
  6.         var thisScrollTop = doc.scrollTop();
  7.  
  8.                 if(thisScrollTop > "83") {
  9.                         objHeader
  10.                                 .css({"top":"-83px","position":"fixed"})
  11.                                 .mouseup(function() {
  12.                                         $(this)
  13.                                                 .stop()
  14.                                                 .animate({"top":"0px"},300);
  15.                                 })
  16.                                 .mouseleave(function() {
  17.                                         $(this)
  18.                                                 .stop()
  19.                                                 .animate({"top":"-83px"},200);
  20.                                 });
  21.                         $("input, label")
  22.                                 .mouseup(false);
  23.                 } else {
  24.                         objHeader
  25.                                 .css({"top":"0px","position":"absolute"})
  26.                                 .mouseup(function() {
  27.                                         $(this).stop();//стопим
  28.                                 })
  29.                                 .mouseleave(function() {
  30.                                         $(this).stop();//стопим
  31.                                 });
  32.                 }
  33.         });//end .scroll
  34. });//end .ready


Пример работы: набор смайлов MccWK (т.е. галерея с 59 смайлами... не советую соваться с лимитами)

ps: На данный скрипт натолкнул Яндекс... отличная идея, но Gmail был первее =).
Если скрипт кому нибудь поможет, я стану на грамм счастливее ;)


-----
Для некоторых лучший способ написать что-нибудь осмысленное - это сесть _опой на клавиатуру.
 
 Top
Поиск в теме | Версия для печати
Страниц (1): [1]
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« JavaScript & VBScript »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
  



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB