0

我正在创建这个登陆页面：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。它有效，但看起来真的很奇怪（一直在颤抖）。

谢谢！

4

1 回答 1

0

我刚刚整理了你的代码一点点，固定缩进等。

至于当你击中位置时实际滚动你的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;
        }

    }
});

我没有对此进行测试，但我只是让你知道从这里去哪里。

我希望我有一点帮助！

于 2013-11-03T22:38:55.277 回答