固定页面位置，滚动时从下往上只移动 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

在此处为您创建了 fiddle：https://jsfiddle.net/svh8owgz/

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

所以在我的示例中 - 我用 class companyInfo 创建了 div 并设置了样式：

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

这就是您图片中显示 'Vision' 的部分。

然后至于缩略图容器 - 它只是在整个容器中的相对定位：

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

这很简单：我将按预期移动（至少 - 如果页面容器大于屏幕高度并且可以开始滚动）。

然后你提到了'Once the second div scrolled to top, then I will move the page and show next page'

你可以做的是使用 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，所以我不得不包含源 - 抱歉。

固定页面位置，滚动时从下往上只移动 div

Fix position of page and move only one div from bottom to top while scrolling

html

scroll

parallax