Question

问题与Move div horizontally when scroll vertically ( jquery or CSS3)

非常相似

我在一个长页面中有一个特定的位置，当用户滚动到它时，我想在屏幕上从页面（右侧）移动div到关闭页面。

在上面的链接中，他们使用文档高度，我认为这对我没有帮助。

我已经知道何时触发移动：

if ((win_height+scroll_top) > start_trigger)
{
    // Move calc
}

我想让div在他们滚动视口高度的时候移动屏幕的距离。

div的起点是right: -464px。

窗口宽度（距离）和窗口高度（移入时间）之间存在关系，但是当达到start_trigger时，我无法弄清楚如何设置div的起始位置。 / p>

start_trigger是5000px。它随屏幕宽度而变化。

这是一个链接：http://tikitour.haricot.co/通常情况下，“选择你的角色”滑块下面的“场景”会被隐藏，直到你通过它来改变高度。

滚动直至看到消防车。希望有所帮助。

我正在努力实现的另一个例子是保镖Ben的“小偷”：http://benthebodyguard.com/index.php - 尚未能解剖它。

Answer 1

确定。检查一下举了一个简单的例子

<强> jsfiddle

您需要计算元素offset().top（距文档顶部的距离）并将其与$(window).scrollTop() + $(window).height();进行比较

让我知道是否有帮助

JQ代码：

$(window).scroll(function() {
    $(".moving").each(function() {
        a = $(this).offset().top 
        b = $(window).scrollTop() + $(window).height();
        if (a < b) $(this).animate({
            'right':'100%',
        });
    });

});

Answer 2

我不知道如何手动执行此操作，但我知道存在带滚动效果的jQuery插件 - scrollmagic http://scrollmagic.io/

通过范围内的垂直滚动水平移动div

2 个答案: