Question

我有一个绝对定位的div，所以它的顶部触及它的父母。这是一个例子（黑盒子）https://imgur.com/a/d7LbP。我试图让它在视图中（当你可以在视口上看到它时）它根据用户滚动的数量向下滚动到其父级的底部。（就像视差背景一样）

我目前有代码正在检查元素何时处于视图中，但需要一些帮助才能使视差功能正常工作。这是我到目前为止所拥有的

    $('article.featured').each(function(){
        var $bgobj = $(this).children('.the-content'); // assigning the object
        var $speed = 5; // setting the speed
        $(window).scroll(function() {
            var yPos = ($window.scrollTop() / $speed);
            // Put together our final background position
            var coords = yPos + 'px';
            // Move the background
            $bgobj.css({ top: coords });
        });
    });

这是有效的，但它基于视口的偏移而不是当元素进入视图时的滚动量。

任何评论都指向我正确的方向将非常感谢！

以下是html的内容

    <article class="featured cf check-view">
    <div class="featured-img" data-type="background" data-speed="5" style="background-image:url('http://via.placeholder.com/350x150');">
        <img src="http://via.placeholder.com/350x150" alt="" />
    </div>
    <div class="the-content">
        <h3><img class="logo" src="http://via.placeholder.com/350x150" alt=""></h3>
        <p class="tags">Web Development / WordPress</p>
        <p>Interactive responsive WordPress site.</p>
        <a href="">View Project</a>
    </div>
</article>

如果您需要查看我正在尝试实现的内容，请参阅工作示例的链接。 http://staging.alexkinejara.com

基于元素在视图中时滚动的顶部位置

0 个答案: