jquery - 如何固定内容低于内容变化高度的位置

Question

我的网页中有动态改变高度的内容(jquery isotope 插件)。我不希望动态内容下面的内容跳上跳下而是保持不动。

我认为，我需要的是以下内容:对于动态内容增长的每个像素，下面的内容应该通过在页面中向下滚动一个像素来向上移动。对于动态内容缩小的每个像素，我必须向上滚动页面。

这是否可能以下面的内容绝对静止的方式进行？

谢谢，罗兰

Answer 1

为什么不将动态内容包裹在一个 div 中，然后给那个 div 一个固定的高度，这样内容只会改变它在 div 中的高度，而下面的内容将保持不变。

这是一个例子

<style>
    .wrapper {
        width: 200px;
        height: 500px;
    }

    .wrapper .dynamic {
        background-color: crimson;
        width: 100%;
        height: 300px;
    }
</style>

<div class="wrapper">
    <div class="dynamic"></div>
</div>
<p>
    am the content, that should stay still.
</p>

<script>
    var dynamic = document.getElementsByClassName('dynamic')[0];

    dynamic.addEventListener('mouseenter', function() {
        dynamic.style.height = 500;
    });

    dynamic.addEventListener('mouseleave', function() {
        dynamic.style.height = 200;
    });
</script>