Question

您好我正在尝试仅在页面的一侧进行文本滚动。所以我有三个部分，一旦我到达那个部分就停止了，下一个部分开始在另一侧滚动。我正在一个个人网站上工作，我正在努力从哪里开始代码。

我还有三个部分，但我只附上了一个认为可能更容易的部分。由于某种原因，我也无法让旋转工作。我错过了一些简单而基本的东西吗？

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）。

使文本仅滚动HTML页面的一部分

1 个答案: