Форум hotibo.ru

Сайты - по стандартам, но не стандартные сайты!






#1 20.07.2010 09:34

Wizard
Разбирающийся
Зарегистрирован: 16.03.2010
Сообщений: 78

Выполнения событий при прокрутке скроллинга

Добрый день, продолжаю старую тему программирования onscroll.
Для наглядности приведу всю страницу:

Код:

title

название

параграф

название

параграф

название

параграф

... ... ... ... ... ... ... ... ...

название

параграф


У html, body и #wrapper высота автоматическая, а длина 100%.
Множество блоков .aspect хитрым образом выстроены посередине экрана, причём имеют абсолютную ширену.
Над блоками .aspect-- #header, под ними-- #footer.

А теперь главное:
Блоки #leftlights и #rightlights хитрым образом расположены между левой границей блоков .aspect и левой границей экрана, между правой границей .aspect'ов и правой границей экрана соответственно.
Допустим, что они на абсолютной высоте 320px от верхней границы экрана.
Поскольку на всей странице лишь один скролл- на всю высоту body- хочется заставить блоки #leftlights и #rightlights принимать такое значение style.top, чтобы они "приезжали", например, на середину экрана, который видит юзверь.
То есть пользователь прокручивает бегунок, а блоки, как всевидящее око, плавно подползают до уровня глаз пользователя.

Моя фантазия истощилась, когда я перепробовал два, на мой взгляд, единственных нормальных путя:
1) с помощью body onscroll='function(){var i = document.getelementById ('leftlights').style.top;};' после чего оперировать с i в циклах и т.д.
2) с помощью document.captureEvents(Event.SCROLL); но это я похоже вообще придумал сам, или же не понимаю, как применять данный метод.

Короче говоря, разъясните, пожалуйста... Готовых примеров не полно, но они есть, например на самом тяжеловесном сайте мира http://heroescomunity.com/ там меню "плывёт" вниз к счастливому глазу пользователя, который зачем-то опустил скроллинг.

PS может быть есть проще путь, как это реализовать, чем onScroll ?


Жизнь- игра. Сюжет хреновый, зато какая графика!

Нет на форуме

 

#2 20.07.2010 10:24

AKS
Опытный
Зарегистрирован: 25.12.2009
Сообщений: 409

Re: Выполнения событий при прокрутке скроллинга

Wizard
Вот такой скрипт вставьте, должно работать:

Код:

function getScrSize() {
  var scrT = 0;
  if(window.scrollY) {
    scrT = window.scrollY ? window.scrollY : window.pageYOffset;
  }
  else if(document.documentElement && document.documentElement.scrollTop) {
    scrT = document.documentElement.scrollTop;
  }
  else if(document.body && document.body.scrollTop) {
    scrT = document.body.scrollTop;
  }
  return scrT;
}
function setBlock(elem1, elem2) {
  var scrollSize = getScrSize();
  elem1.style.top = elem2.style.top = Math.round(320 + scrollSize) + "px";
}
onload = function() {
  var elem1 = document.getElementById("leftlights"),
  elem2 = document.getElementById("rightlights");
  setBlock(elem1, elem2);
  this.onresize = this.onscroll = function() { setBlock(elem1, elem2); }
}

Нет на форуме

 

#3 20.07.2010 15:57

Wizard
Разбирающийся
Зарегистрирован: 16.03.2010
Сообщений: 78

Re: Выполнения событий при прокрутке скроллинга

Вроде понял суть скрипта, но он почему-то не работает. onload = function()  действительно запускает function setBlock (...), но изменения не видны. как были блоки неподвижны, так и остались. У Вас мой пример работал с Вашим скриптом? Или хоть один пример...


Жизнь- игра. Сюжет хреновый, зато какая графика!

Нет на форуме

 

#4 20.07.2010 16:05

AKS
Опытный
Зарегистрирован: 25.12.2009
Сообщений: 409

Re: Выполнения событий при прокрутке скроллинга

Да, работает в IE6, Opera7+, Gecko/20040206+.

Нет на форуме

 

#5 20.07.2010 16:06

Wizard
Разбирающийся
Зарегистрирован: 16.03.2010
Сообщений: 78

Re: Выполнения событий при прокрутке скроллинга

Да, всё испробовал... Значит что-то не так со скриптом, хотя с виду всё прилично...


Жизнь- игра. Сюжет хреновый, зато какая графика!

Нет на форуме

 

#6 20.07.2010 16:08

AKS
Опытный
Зарегистрирован: 25.12.2009
Сообщений: 409

Re: Выполнения событий при прокрутке скроллинга

Елки-палки, только сейчас дошло - Вам ведь нужно, чтобы они опускались сверху вниз!
А я думал, что нужно их заставлять при скроллинге оставаться на одном и том же месте...

Нет на форуме

 

#7 20.07.2010 16:14

Wizard
Разбирающийся
Зарегистрирован: 16.03.2010
Сообщений: 78

Re: Выполнения событий при прокрутке скроллинга

Это было бы странно, так как они итак оставались на одном месте:)


Жизнь- игра. Сюжет хреновый, зато какая графика!

Нет на форуме

 

#8 20.07.2010 16:18

AKS
Опытный
Зарегистрирован: 25.12.2009
Сообщений: 409

Re: Выполнения событий при прокрутке скроллинга

Да Вы там в начале ссылку "мертвую" дали, я и не пойму. Кстати, у меня только в FF скроллинг не появлялся, а в IE, Opera страница скроллится и блоки "уезжают" без скрипта.
Значит нужно, чтобы плавно двигались? Это посложнее будет...

Нет на форуме

 

#9 20.07.2010 16:31

Wizard
Разбирающийся
Зарегистрирован: 16.03.2010
Сообщений: 78

Re: Выполнения событий при прокрутке скроллинга

Нет... Нужно чтобы блоки всегда были в поле зрения, плавность необязательна. сам придумаю, если будет без неё всё работать. У Вас на страничке много контента, поэтому вы его прокручиваете... Но из любого участка этого контенда должна быть видна, допустим, меню (как это раньше было на http://heroescommunity.com/ , сейчас кажется убрали свою турбо-меню, которая весила чуть больше 100килобайт%) ), а мне надо, чтобы тело документа прокручивалось, как неопределённо-высокая колонка посередине страницы, но при этом чтобы два блока по бокам, которые сначало находятся на расстоянии 320пикселей от верха всего документа при передвижении бегунка менялись.
При прокрутке вниз style.top увеличивается, пока не достигнет середины ВИДИМОЙ области на экране. А если его повести наверх, то он должен наоборот, уменьшать style.top опять-таки до попадания двух боковых блоков в середину экрана. Я не против, например, использовать координаты курсора или одного из видимых в данный момент центральных блоков, чтобы циклично приравнять расстояние от верха документа до блока .aspect к left/rightlights.style.top...
Вопрос: как это сделать? Можно ли воплотить в жизнь одно из моих предложений (с помощью курсора или центральных блоков) ?


Жизнь- игра. Сюжет хреновый, зато какая графика!

Нет на форуме

 

#10 20.07.2010 16:36

AKS
Опытный
Зарегистрирован: 25.12.2009
Сообщений: 409

Re: Выполнения событий при прокрутке скроллинга

Wizard написал:

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

Так я и сделал, что они всегда в середине...

Нет на форуме

 

#11 20.07.2010 16:52

Wizard
Разбирающийся
Зарегистрирован: 16.03.2010
Сообщений: 78

Re: Выполнения событий при прокрутке скроллинга

Я имел ввиду даже после прокрутки скроллбара... А у Вас они прикованы, стоят как вкопаные и всё. Попробуйте увидеть мои два блока после того, как скролл будет целиком внизу... Вот что требуется


Жизнь- игра. Сюжет хреновый, зато какая графика!

Нет на форуме

 

#12 20.07.2010 17:10

AKS
Опытный
Зарегистрирован: 25.12.2009
Сообщений: 409

Re: Выполнения событий при прокрутке скроллинга

Wizard
Что значит - "стоят, как вкопанные"? Они всегда в середине, если страницу проскроллить до низу, то они все равно остануться посередине...

Нет на форуме

 

#13 20.07.2010 17:19

Wizard
Разбирающийся
Зарегистрирован: 16.03.2010
Сообщений: 78

Re: Выполнения событий при прокрутке скроллинга

Вы не могли бы сделать скриншот ? А то может всё есть но я что-то не понял или Вы, или я скрипт не понял как подключить надо по-особому... По Вашей последней реплике могу сказать, что так и надо... Но у меня не так:(


Жизнь- игра. Сюжет хреновый, зато какая графика!

Нет на форуме

 

#14 20.07.2010 17:25

AKS
Опытный
Зарегистрирован: 25.12.2009
Сообщений: 409

Re: Выполнения событий при прокрутке скроллинга

Wizard
Я Вам сейчас архивчик со страничкой вышлю на e-mail...

Нет на форуме

 

#15 20.07.2010 17:29

Wizard
Разбирающийся
Зарегистрирован: 16.03.2010
Сообщений: 78

Re: Выполнения событий при прокрутке скроллинга

Большое спасибо за Ваше время.


Жизнь- игра. Сюжет хреновый, зато какая графика!

Нет на форуме

 

#16 20.07.2010 17:57

Wizard
Разбирающийся
Зарегистрирован: 16.03.2010
Сообщений: 78

Re: Выполнения событий при прокрутке скроллинга

AKS
Отправил Вам ответное письмо с картинками. Может, так нагляднее и удобнее.
Дело в том что изначально контента не 4 блока .aspect а гораздо больше.
Это-то и есть проблема. Если всё равно не понятна затея, то могу выслать меню, которая раньше была на том сайте выше. Там это реализовано, правда, не лучшим образом.


Жизнь- игра. Сюжет хреновый, зато какая графика!

Нет на форуме

 

#17 20.07.2010 18:03

Wizard
Разбирающийся
Зарегистрирован: 16.03.2010
Сообщений: 78

Re: Выполнения событий при прокрутке скроллинга

Ах вот оно что... Работает везде, кроме IE. Забудьте про письмо:) Так в чём тут дело?


Жизнь- игра. Сюжет хреновый, зато какая графика!

Нет на форуме

 

#18 20.07.2010 18:10

Wizard
Разбирающийся
Зарегистрирован: 16.03.2010
Сообщений: 78

Re: Выполнения событий при прокрутке скроллинга

Так что проблема с IE6... В Фоксе и Опере всё как я просил, спасибо.


Жизнь- игра. Сюжет хреновый, зато какая графика!

Нет на форуме

 

#19 20.07.2010 18:12

AKS
Опытный
Зарегистрирован: 25.12.2009
Сообщений: 409

Re: Выполнения событий при прокрутке скроллинга

Проблема не в IE6, проблема вот здесь:

Код:

html, body, #wrapper {
overflow: auto;
}

Нет на форуме

 

#20 20.07.2010 18:34

Wizard
Разбирающийся
Зарегистрирован: 16.03.2010
Сообщений: 78

Re: Выполнения событий при прокрутке скроллинга

Но если это убрать то в IE скроллера вообще не будет...


Жизнь- игра. Сюжет хреновый, зато какая графика!

Нет на форуме

 

#21 20.07.2010 18:37

AKS
Опытный
Зарегистрирован: 25.12.2009
Сообщений: 409

Re: Выполнения событий при прокрутке скроллинга

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

Нет на форуме

 

#22 20.07.2010 19:02

Wizard
Разбирающийся
Зарегистрирован: 16.03.2010
Сообщений: 78

Re: Выполнения событий при прокрутке скроллинга

Она почему-то есть, а бегунка на ней нету. Как будто контента мало...


Жизнь- игра. Сюжет хреновый, зато какая графика!

Нет на форуме

 

#23 20.07.2010 19:03

AKS
Опытный
Зарегистрирован: 25.12.2009
Сообщений: 409

Re: Выполнения событий при прокрутке скроллинга

То есть - что-то со страницей, но не со скриптом...

Нет на форуме

 

#24 20.07.2010 19:04

Wizard
Разбирающийся
Зарегистрирован: 16.03.2010
Сообщений: 78

Re: Выполнения событий при прокрутке скроллинга

Всё дело было в

Странно... Чего невалидного? Или неправильного, так сказать... Я не понимаю


Жизнь- игра. Сюжет хреновый, зато какая графика!

Нет на форуме

 

Board footer