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 ，而是将框的位置更改为 fixed after 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

一条简单的线；position: fixed; 这意味着该对象固定在页面上，因此在您滚动时它会跟随。

于 2012-06-20T16:57:37.107 回答