javascript - 使文本仅滚动 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");
    }
});

编辑: http://jsfiddle.net/78wcaf6d/1/ 为了使其更通用，我必须查看其他部分的名称(并且可能需要您更改 html)。