Question

我正在尝试构建一个跟随用户滚动的右框：

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之后将框的位置更改为固定。该解决方案的缺点是相对于列大小的非常错误的行为，因为当我将类更改为固定时，它不再占用右列内的空间，如果左列较小，则会出现一整套新错误

Answer 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);

});

Answer 2

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

div跟随滚动

2 个答案: