Форум hotibo.ru

Wizard · 20.07.2010 09:34

Добрый день, продолжаю старую тему программирования 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 ?

AKS · #2 20.07.2010 10:24

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); }
}

Wizard · #3 20.07.2010 15:57

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

AKS · #4 20.07.2010 16:05

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

Wizard · #5 20.07.2010 16:06

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

AKS · #6 20.07.2010 16:08

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

Wizard · #7 20.07.2010 16:14

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

AKS · #8 20.07.2010 16:18

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

Wizard · #9 20.07.2010 16:31

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

AKS · #10 20.07.2010 16:36

Wizard написал:

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

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

Wizard · #11 20.07.2010 16:52

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

AKS · #12 20.07.2010 17:10

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

Wizard · #13 20.07.2010 17:19

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

AKS · #14 20.07.2010 17:25

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

Wizard · #15 20.07.2010 17:29

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

Wizard · #16 20.07.2010 17:57

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

Wizard · #17 20.07.2010 18:03

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

Wizard · #18 20.07.2010 18:10

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

AKS · #19 20.07.2010 18:12

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

Код:

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

Wizard · #20 20.07.2010 18:34

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

AKS · #21 20.07.2010 18:37

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

Wizard · #22 20.07.2010 19:02

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

AKS · #23 20.07.2010 19:03

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

Wizard · 20.07.2010 19:04

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

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

Форум hotibo.ru

#1 20.07.2010 09:34

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

Код:

название

название

название

название

#2 20.07.2010 10:24

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

Код:

#3 20.07.2010 15:57

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

#4 20.07.2010 16:05

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

#5 20.07.2010 16:06

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

#6 20.07.2010 16:08

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

#7 20.07.2010 16:14

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

#8 20.07.2010 16:18

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

#9 20.07.2010 16:31

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

#10 20.07.2010 16:36

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

Wizard написал:

#11 20.07.2010 16:52

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

#12 20.07.2010 17:10

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

#13 20.07.2010 17:19

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

#14 20.07.2010 17:25

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

#15 20.07.2010 17:29

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

#16 20.07.2010 17:57

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

#17 20.07.2010 18:03

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

#18 20.07.2010 18:10

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

#19 20.07.2010 18:12

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

Код:

#20 20.07.2010 18:34

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

#21 20.07.2010 18:37

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

#22 20.07.2010 19:02

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

#23 20.07.2010 19:03

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

#24 20.07.2010 19:04

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

Board footer