固定位置，并从底部移动只是一个DIV滚动时

Question

我开发的视差网站顶部，并在一个页面（格）我已经在另一个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类和风格是：

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

这将是部分地方说，在你的形象“愿景”。

然后作为thumbnailcontainer - 这只是得到了整体容器内的相对定位：

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

这是相当直截了当：我将只是移动预期（至少 - 如果网页容器大于屏幕高度和滚动可能开始于）。

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

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