jquery - 仅当用户滚动到首屏下方时，如何使用 jquery 触发灯箱

Question

设置：所以我有一个标题 div 960px x 400px，足以容纳左侧的 youtube 视频和其他一些要点和右侧的号召性用语。该 div 是隐藏的，仅在单击按钮时显示。很容易。

但我想在颜色框中显示相同的隐藏内容，但前提是该用户向下滚动了 750 像素，这将是我折叠的末尾。如果说他们只向下滚动了 400 像素并且他们点击了播放按钮，那么他们应该被弹回屏幕顶部并观看上面提到的标题 div 中的视频。

我正在考虑使用航点来帮助实现此功能，但可能有更好的方法。

让我知道你的想法。

Answer 1

<a href="#">Play</a>会将用户带到文档的顶部。确保您的点击处理程序返回 true 并且不会停止传播。

Answer 2

您可以考虑滚动的东西是.scroll()来自 jQuery（阅读此处）和.scrollTo() jQuery 插件

这是我在JS Fiddle中制作的一个示例

$(function(){
$(window).scroll( function() {
    var scrolled = $(this).scrollTop();
    if(scrolled > 150) {
        $('#up').fadeIn();
    } else if(scrolled < 150) {
        $('#up').fadeOut();
    }
});
    $('#up').click(function(){
        $.scrollTo('#Top');
    });
});

在此示例中，当window滚动超过150px时，#up将显示 div。如果滚动条上的位置是top，则#updiv 将隐藏。单击#updiv 将自动滚动到 div #top（参见小提琴）。

我认为这与一些改变会得到你所需要的。