0

このランディング ページを作成しています: http://tag4share.com/landing/#

2つの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 に答える