Question

我正在创建此着陆页：http://tag4share.com/landing/#

哪里有两个galaxy s3（一个白色带有“Organizador”标签，黑色带有“Participante”标签），我想停止滚动页面并自动开始滚动手机内的内容（iFrame， div，任何东西）。

有可能吗？

基本上我想将焦点“聚焦”在div中（并且即使光标没有悬停它也能使其工作）。或滚动时动画而不滚动身体。

示例：http://www.google.com/nexus/5/

关于“捕捉重要时刻所需的一切”。一部分。

我的尝试：

var lastScroll;
var currentScroll = $(window).scrollTop();

$(window).scroll(function() {

    lastScroll = currentScroll;
    currentScroll = $(window).scrollTop();

    if($(window).scrollTop() >= 2024 && $(window).scrollTop() < 2500)
    {
                var difference = currentScroll - lastScroll;
        $(".main").css({"margin-top":"-="+currentScroll});
    }
    });

我试图将主div与滚动一起移动。它有效，但看起来很奇怪（持续震动）。

谢谢！

Answer 1

我只是整理了你的代码，修改了缩进等。

至于在你到达位置时实际滚动你的div，使用animate来实际模仿scrolling效果，一旦你知道你已经到达底部，你可以在滚动中放入另一个if语句用于停止重置滚动位置的功能。

var lastScroll;
var scrollPosition = $(window).scrollTop();
var reachedBottom = false;
var phonePositionTop = $('#phoneContainerID').position().top;
var phonePositionBottom = phonePositionTop + $('#phoneContainerID').height();

$(window).scroll(function() {

    if(scrollPosition >= phonePositionTop && scrollPosition < phonePositionBottom && reachedBottom == false){
        var difference = currentScroll - lastScroll;
        // Keep resetting scroll to the phoneContainerTop position
        $(".main").css({"margin-top": phonePositionTop});
        var scrollLimit = -100;
        if ($('#phoneContainerID').position().top < scrollLimit) {
            //Once the scroll limit is less than -100 (scrolled up 100 pixels)
            // Disable our 'pause' effect, and continue
            reachedBottom = true;
        }

    }
});

我没有对此进行测试，但是我只是想知道从这里开始的地方。

我希望我能帮助一点！

停止滚动页面，滚动div

1 个答案: