javascript - 将元素粘贴到浏览器窗口/容器的底部

Question

更新 - 回答了我自己的问题，查看下方。

我需要将一个元素粘贴到浏览器窗口的底部(position: fixed; bottom:0;)，直到到达容器的末尾。

基本上，它是一个人的图像，在底部被切掉了。一旦我在页面中滚动到足以看到该人的图像，并向下滚动到该图像的最后一个像素，它应该会粘在底部，直到到达容器的末端。

这是内容结构的 jsfiddle。 https://jsfiddle.net/mdy41ens/2/

所以在这里，有页面的顶部内容，向下滚动时，左侧有一只小猫图像。小猫和文本都在“.container”中。因此，当您向下滚动页面以阅读所有文本时，小猫图像应固定在浏览器窗口的底部，直到到达容器的末尾，然后它只是 position: absolute; bottom:0; 或类似的东西(卡在容器的底部，不再是浏览器)。

我发现很多代码示例有助于做相反的事情——将元素粘贴到屏幕的顶部，一旦浏览器窗口的顶部与被粘贴元素的顶部相遇。

<div class="container">
    <div class="imgContainer">
        <img src="http://upshout.com/wp-content/uploads/2015/06/dwarf-kitten-01.jpg" />
    </div>
    <div class="contentContainer">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras laoreet eget massa sit amet feugiat. In et nisi sagittis, condimentum leo vitae, congue purus. Aliquam nec malesuada odio, non varius orci. Suspendisse luctus ipsum a odio tristique tempus at at ante. Duis auctor lacus arcu, ut consequat libero fringilla sed. Ut in dapibus purus. Vivamus posuere sapien ut ex semper, ut pharetra nunc mollis. Vestibulum suscipit ipsum massa, a pharetra leo accumsan vel. Praesent varius ornare scelerisque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin vel ligula quis dolor malesuada pulvinar at id magna. Nulla pretium erat ante. Cras fringilla ut nulla quis rutrum. Quisque eget ex auctor tortor varius tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam auctor tincidunt fermentum.</p>
        <p>Suspendisse tincidunt ac urna nec ultrices. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed risus orci, volutpat a nisl in, posuere blandit augue. Quisque nec dictum metus. Donec quam orci, vestibulum vitae erat vel, sodales consectetur dolor. Morbi sed leo sit amet nibh hendrerit ornare. Ut ac malesuada risus. Ut congue lorem ut justo accumsan, vel dignissim turpis varius.</p>
        <p>Vivamus et neque mauris. Fusce pulvinar pretium dui, quis auctor mi suscipit ut. Nam et turpis et purus posuere fermentum at ac libero. In sagittis aliquet urna, nec dapibus lorem convallis iaculis. Aliquam a suscipit sapien. Quisque eget velit quis ex placerat auctor. In sodales libero non viverra vehicula. Maecenas pellentesque lacinia pretium. Nam iaculis nunc tincidunt purus scelerisque, quis sodales nunc faucibus. Phasellus semper aliquet tristique. Pellentesque nec leo a sapien gravida maximus. Pellentesque non pellentesque eros. Quisque gravida tortor sed nibh tincidunt varius. In finibus facilisis congue. Nam posuere dui orci, et consequat ipsum pretium ut.</p>
        <p>Aenean commodo nisi et dapibus iaculis. Mauris mollis accumsan massa. Aliquam lectus enim, dictum eu dapibus vitae, feugiat non libero. Cras ac sapien euismod, facilisis justo vitae, accumsan metus. Aenean ultricies blandit ipsum nec semper. Vestibulum imperdiet enim convallis elit iaculis sollicitudin. Donec commodo, tortor vitae imperdiet dictum, dui purus elementum sem, vel rhoncus nisi felis vel nulla. Ut a massa id velit porta tincidunt at vel nunc. Sed vel eleifend nunc, a efficitur enim. Mauris quis odio id eros feugiat blandit nec eget velit. Nam sed magna eu tellus porta maximus sed eu ligula.</p>
    </div>
</div>

Answer 1

请原谅这是波涛汹涌的事实。我将把所有花哨的样式留给你，但这给了你想法。 (我现在把图片放在右边是因为让文本留在右边而图片放在左边需要另一个 div 和一些样式，并且图像之间有一个空格和来自某些填充物或某处的东西的底部容器。真的很微不足道。)

您可以使用 JQuery 来监视滚动的位置，一旦到达窗口底部，就可以为图像设置不同的样式，使其变为 position: fixed; 和 底部:0；

这里真正的魔力是 JQuery。

JQuery

$(document).ready(function () {

    $(window).scroll(function () {
            var scrollBottom = $(document).height() - $(window).height() - $(window).scrollTop();
        if (scrollBottom < 400) {
            $('.imgContainerScrolling').addClass('imgContainerAtBottom');           
        } else {
                $('.imgContainerScrolling').removeClass('imgContainerAtBottom');
        }
    });
});

JSFiddle