Skrollr. изменение содержимого в фиксированном div

Question

Интересно, как добиться этого эффекта на http://www.squarespace.com. То, что я имею в виду:

• вы прокрутите вниз и в одной точке изображения компьютерного монитора остается в фиксированном положении
• после этого изображение продолжает изменяться во время прокрутки.

Как вы можете контролировать контент и изменять CSS с помощью Javascript? Она должна быть на событии окна прокрутки:

window.onscroll = function() { 
    // but I don't know what to use here 
} 

При меньшей ширине браузера, вышеуказанные элементы становятся карусель, но я не заинтересован в этом.

Answer 1

Из-тегов на этот пост, я буду считать, что этот вопрос в отношении skrollr library

Skrollr управляется с помощью атрибутов данных HTML. То, что вы видите, когда монитор прокручивается, а затем фиксируется в данной позиции, называется «закреплением». Как вы определяете атрибуты данных в Skrollr, может быть довольно запутанным вначале, но как только это будет понято, библиотека является своего рода мечтой работать.

Я напечатал и приколол Petr Tichy's cheat sheet рядом с моим монитором в первые несколько недель моего первого проекта skrollr.

Пример пиннинга в Skroller будет осуществляться так:

<div id="example" 
    data-100-top="position:fixed;" 
    data-anchor-target="#example"> 

    These words are pinned 100px from the top of the screen  

</div> 

Целью Skrollr является то, что знание JQuery/JavaScript действительно не требуется. Css управляется библиотекой и игнорируется в элементах данных. В приведенном выше примере показано изменение положения на фиксированное, но если вы хотите, чтобы div расширял 100px сверху, вы могли вводить параметры ширины/высоты css там или почти любой другой css, который вы хотели бы.

Если вы ищете более надежную библиотеку скроллинга, в которой знание jQuery является более требовательным, я рекомендую вам взглянуть на ScrollMagic (моя нехватка репутации мешает мне ссылаться на scrollmagic).