1

ユーザーのスクロールに従う正しいボックスを作成しようとしています:

CSS:

        .clearfix:after {
            content: " ";
            display: block;
            font-size: 0;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .wrapper {
            border: 1px solid black;
        }

        .column {
            float: left;
            border: 1px solid red;
        }

        .relative {
            position: relative;
            margin-top: 0px;
        }

HTML:

<div class="wrapper clearfix">
    <div class="column">
        small or big text
    </div>
    <div class="column">
        <div class="dmap relative">a</div>
        <span>some other crazy stuff</span>
    </div>
</div>

Javascript:

referencey = $(".dmap").offset().top;

$(window).scroll(function (event) {

    var y = $(this).scrollTop();

    if (y >= referencey) {
        $(".dmap").css("margin-top", y - referencey)
    } else {
        $(".dmap").css("margin-top", 0);
    }

});

コードは問題なく動作します。列のサイズは関係ありません。マージントップを変更するだけなので、列とラッパーが常に新しいサイズになることを意味します。このコードの欠点は、ユーザーがスクロールしているときに小さな小さなジャンプが発生することです。

スクロール中の小さなジャンプを回避する別の方法は、margin-top を変更するのではなく、ボックスの位置を固定後に変更することy >= referenceyです。ソリューションの欠点は、列のサイズに比べて非常にバグのある動作です。クラスを固定に変更すると、右の列内のスペースが占有されなくなり、左の列が小さくなると、新しいバグのセット全体が表示されるためです。 .

4

2 に答える 2

1

問題を解決するのではなく、回避する解決策を思いつきました。私が行ったことは、ユーザーがスクロールを停止した後にボックスをスクロールすることです。別の効果ですが、少しジャンプすることはありません (見た目もクールです)。

var scrolly = $(".dmap").offset().top;
var scroll = false;

$(window).scroll(function (event) {

    var y = $(this).scrollTop();

    if (scroll) {
        clearTimeout(scroll);
    }

    scroll = setTimeout(function () {
        $(".dmap").animate(
            { marginTop: (y >= scrolly ? y - scrolly : 0) },
            { queue: false, duration: 200 }
        );
    }, 100);

});
于 2012-06-20T17:36:41.993 に答える
0

それは単純な 1 行です。position: fixed; これは、オブジェクトがページに固定されているため、スクロールするとオブジェクトが追従することを意味します。

于 2012-06-20T16:57:37.107 に答える