在带有隐藏溢出的粘性 div 中滚动内容

Question

所以，我试图找出一种很酷/不同的方式来展示与长静态图像不同的完整网页设计。我的目标是有一个“监视器”图形棒，而当用户滚动时，图像（完整的网页）在其中流动。我通过在其下方流动图像的位置粘性“监视器”图形来解决它。我喜欢它如何滚动内容，然后在完成后将部分向上推。

问题在于图像溢出。我能够用边框隐藏顶部的溢出（我认为从长远来看会很好）..但我不知道如何隐藏底部的溢出并仍然保持相同的滚动行为现在有。

如果能以某种方式摆脱“监视器”底部的空间，让它正好位于容器的底部，那就太好了。我想这个功能最终会像一个粘性 iframe，可以在框架本身之外滚动，然后在内容到达结尾后向上推。

我能做到这一点，但在保持滚动行为的同时隐藏 div 底部的溢出确实存在问题。

示例 >> https://codepen.io/cjcort/pen/NWKryVa

提前致谢！

<style>
body {
    margin:0px;
}

.container-1 {
    background-color:grey;
}

.container-2 {
    background-color:lightblue;
}

.parent {
    width:50%;
    margin:0px auto;
    padding:100px 0px;
}

.sticky-monitor {
    text-align: center;
    z-index:1
}

.grey {
    border-top:70px grey solid;  
}

.blue{
    border-top:70px lightblue solid;
}

.sticky-monitor img {
    width:100%;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    z-index:4
}

.image {
    margin-top:-65%;
    text-align:center;
}

.image img {
    width:93%;
    height:1000px !important;
    margin:auto
} 


.is-sticky {
    position: sticky; 
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    top: 0; 
}
</style>



<div class="container-1">
    <div class="parent">
        <div class="sticky-monitor is-sticky grey">
            <img src="https://charliecort.com/test/computer.svg">
        </div>
        <div class="image">
            <img src="https://images.unsplash.com/photo-1563468415006-0b70ca8eb306?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" />
        </div>
    </div>
</div>

<div class="container-1">
    <div class="parent">
        <div class="sticky-monitor is-sticky grey">
            <img src="https://charliecort.com/test/computer.svg">
        </div>
        <div class="image">
            <img src="https://images.unsplash.com/photo-1563468415006-0b70ca8eb306?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" />
        </div>
    </div>
</div>

Answer 1

很遗憾，使用overflow: hidden 和position: sticky 会破坏粘性效果。
Dealing with overflow and position: sticky

它极大地限制了 CSS 解决方案。目前，我只能在 JavaScript 中思考。
您可以计算显示器下方容器空间的高度。此高度将在元素中用于隐藏转义图像部分。

首先，在sticky-monitor 中创建一个div。让我们为它设置.hide-image 类：

<div class="sticky-monitor is-sticky grey">
  <img src="http://charliecort.com/test/computer.svg">
  <div class="hide-image"></div>
</div>

CSS：

.hide-image {
    position: absolute;
    width: 100%;
    background: grey;
    transform: translateY(-4px); // to fill the small gap
}

最后是用于高度计算的JavaSript。将有一个基本计算变量，其值仅在窗口调整大小时才会重新计算，因为在滚动期间它们不会改变。每当发生滚动时都会计算高度：

// variables to get elements;
var container = document.querySelector('.container');
var monitor = document.querySelector('.container .sticky-monitor');
var hideImageElement = document.querySelector('.hide-image');

// variable for calculation later
var baseForCalc;

window.addEventListener('resize', getValuesImage);
window.addEventListener('scroll', adjustHideImage);

function getValuesImage() {
    baseForCalc = container.offsetHeight + container.offsetTop - monitor.offsetHeight;
    adjustHideImage();
}

function adjustHideImage () {
    hideImageElement.style.height = (baseForCalc - monitor.offsetTop) + 'px';
}

getValuesImage(); // get the values at least once
adjustHideImage(); // apply the values at least once