Question

我在页面的中途触发元素的视差效果。当我将它附加到scrollTop()时，它会导致元素在初始化时跳转。

var feedPos = $(".feed").offset().top - 100;

$(window).scroll(function(){
    if($(window).scrollTop() >= feedPos) {
        $(".feed").css("top", 150 - $(window).scrollTop() / 100);
    }
});

有什么想法吗？

Answer 1

这些方面的某些内容可能会对你有帮助。

对于html，我制作了100个80px高的div和一些文本，以及25个80px调用背景颜色和底部边框，这样你就可以看到滚动速度的差异。我使用带有剃刀的c＃mvc来生成它们，但是你想创建这些div很好。

<div id="container">
    <div class="fast">
        @for (var i = 1; i <= 100; i++)
        {
            <div>@i. This is row @i</div>

        }
    </div>

    <div class="slow">
        @for (var j = 0; j < 25; j++)
        {
            var r = 255 - j;
            var g = 127 + (int)(.5 * j);
            var b = 10 + j;
            <div class="color" style="background-color:rgb(@r, @g, @b)"></div>
        }
    </div>
</div>

对于css，我使用scss，但是你可以随时创建css。

#container {
    height: 700px;
    width: 250px;
    overflow-y: hidden;
    position: relative;

    .fast {
        position: absolute;
        top: 0;
        div {            
            height: 80px;
            width: 100%;
        }
    }

    .slow {
        width:100%;        
        position: absolute;
        top: 0;
        div {            
            height: 80px;
            width: 100%;
            opacity: .3;
            border-bottom:1px dotted white;
        }
    }
}

没有javascript：

var isAnimating = false;
$(document).ready(function ()
{
    $('#container').on('DOMMouseScroll mousewheel', function (e)
    {
        if (!isAnimating)
        {
            isAnimating = true;
            e.preventDefault();

            var delta = e.originalEvent.wheelDeltaY;                
            var $this = $(this);

            console.log(delta);


            var newFast = parseInt($this.find('.fast').css('top'), 10) + delta;
            var newSlow = parseInt($this.find('.slow').css('top'), 10) + delta / 4;

            if (newFast > 0)
                newFast = 0;
            if (newSlow > 0)
                newSlow = 0;

            console.log(newFast + "   |   " + newSlow);

            $this.find('.fast').animate({ top: newFast + 'px' }, 100);
            $this.find('.slow').animate({ top: newSlow + 'px' }, 100, function () { isAnimating = false; });

        }
    });

});

注意：这仅处理鼠标滚轮滚动，而不是拖动滚动条滚动。实际上，我没有创建一个滚动div，所以你看到的所有滚动都来自方向盘。您也可以进行.scroll(...)事件，但从一个浏览器到另一个浏览器，这些事件往往非常挑剔。即便如此，也有一些抖动。搞乱滚动事件可能是一个棘手的事情。

视差中途通过页面

1 个答案: