Сделать текст прокруткой только часть HTML-страницы

Question

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

У меня есть http://jsfiddle.net/78wcaf6d/, чтобы помочь?

У меня есть еще три раздела, но я только придумал, что это может быть проще. По какой-то причине я также не могу заставить поворот работать. Я пропустил что-то простое и основное?

CSS:

#vertical-text1 { 
    transform: rotate(-90deg); 
    transform-origin: left top; 
    margin-top: 20px; 
    position: relative; 
    font-size: 5em; 
    color: #000; 

} 

.photoset { 
    width: 1050px; 
    margin: 0 auto; 
} 

HTML:

<div id="vertical-text1"> Print Media </div> 

<div class="photoset" data-layout="131"> 
    <img src="img/nature1.jpg" width="1000" height="1000" data-highres="img/nature1.jpg"> 
    <img src="img/nature2.jpg" width="333.3" height="333.3" data-highres="img/nature2.jpg"> 
    <img src="img/nature3.jpg" width="333.3" height="333.3" data-highres="img/nature3.jpg"> 
    <img src="img/nature4.jpg" width="333.3" height="333.3" data-highres="img/nature4.jpg"> 
    <img src="img/nature5.jpg" width="1000" height="1000" data-highres="img/nature5.jpg"> 
</div> 
     </div> 

Я знаю, что изображения являются пустыми, но это проклейки я планирую так, даже если они пусты, они масштабируется размер.

Answer 1

Я предполагаю, что вы хотите исправить части своего сайта на основе прокрученных пикселей?

$(document).scroll(function(){ 
    var scrollOffset = $(document).scrollTop(); 
    var photoset = $('.photoset') 
    var minScrollOffset = photoset.position().top; 
    var maxScrollOffset = photoset.position().top + photoset.height(); 
    if(minScrollOffset > 0 && scrollOffset < maxScrollOffset){ 
     $(".photoset-fix").addClass("lock"); 
    } else { 
     $(".photoset-fix").removeClass("lock"); 
    } 
}); 

EDIT: http://jsfiddle.net/78wcaf6d/1/ Чтобы сделать это более общим, я должен был бы видеть имена других разделов (и, возможно, придется попросить вас изменить HTML).