固定页面的位置，滚动时只从底部到顶部移动一个div

Question

我正在开发一个视差网站，在一个页面（div）中，我在另一个div中有一些图像，如

<div>   //page which fits in window
  <div>   //inner div which will be on left side, and this needs to be fixed positionwhile scrolling
      Some content....
  </div>
  <div>  //inner div it will be on right side with 4 small images, this div should move from bottom to top while scrolling
     <img></img><img></img><img></img><img></img>
  </div>
</div> 

简而言之，我有一个带有两个div的页面，其中我只想移动一个div而另一个应该被修复。

如图所示，视觉div和背景应该是固定的，右侧只有四个图像在滚动时应从下到上移动。

一旦第二个div滚动到顶部，我将移动页面并显示下一页。

任何想法???

Answer 1

在这里为你创造了一个小提琴：https://jsfiddle.net/svh8owgz/

回答您的问题：无论滚动如何，都可以使用position: fixed的CSS来修复图像。

所以在我的例子中 - 我用类companyInfo创建了div并对其进行了样式化：

.companyInfo {
    position:fixed;
    top:0%;
    left:2%;
    width: 200px;
    height:200px;
    background-color: blue;
}

这将是它所说的“愿景”的部分。在你的形象。

然后就缩略图容器而言 - 它只是在整个容器中得到了相对定位：

div.imageContainer {
    position:relative;
    left: 400px;
    width: 200px;
    top:400px;
}

这非常直截了当：我将按预期移动（至少 - 如果页面容器大于屏幕高度并且可以开始滚动）。

然后你提到＆＃39;一旦第二个div滚动到顶部，我将移动页面并显示下一页＆＃39;

您可以使用jQuery.appear插件检查元素是否进入可见范围。我所做的是在实际页面容器下面添加一个id为pageTrigger的div。这意味着您可以开始收听滚动到页面底部的用户事件：

(function ($) {
    $('#pageTrigger').appear();
    $('#pageTrigger').on('appear', function (event, $all_appeared_elements) {
        // Trigger page change
        alert("page change triggered");
    });
})(jQuery);

请务必在您的页面中引用jQuery和jQuery.appear，否则这将无效。另外 - 我无法为这个插件找到一个不错的HTTPS CDN，所以我必须包含源代码 - 对不起。