Javascript 要跟随滚动的div

我正在尝试创建一个正确的框，它跟随用户滚动：

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;
        }

<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>

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

});

HTML:

        .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;
        }

<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>

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

});

代码运行得很好。列的大小是不相关的，因为我所做的只是更改页边距顶部，这意味着列和包装器总是得到一个新的大小。代码的缺点是当用户滚动时会有小的跳跃

---

滚动时避免小跳跃的另一种方法不是更改边距顶部，而是在

y>=referencey

之后将框的位置更改为fixed。该解决方案的缺点是相对于列大小而言，存在一个非常多的错误行为，因为当我将类更改为fixed时，它不再占用右列中的空间，如果左列较小，则会出现一整套新的错误。

只需一行<代码>位置：固定

---

这意味着对象固定在页面上，因此当您滚动时，它会跟随您。

只需一行<代码>位置：固定

---

这意味着对象已固定在页面上，因此当您滚动时，它会随之移动。

我提出了一个解决方案，该解决方案不会解决问题，但会解决问题。我所做的是在用户停止滚动后滚动框。一个不同的效果，但没有小跳跃（它看起来也很酷）

---

我想出了一个解决方案，它不是解决问题，而是解决问题。我所做的是在用户停止滚动后滚动框。一个不同的效果，但没有小跳跃（它看起来也很酷）

---

最好绝对定位盒子。你试过

position:fixed？@未定义如果在框中使用固定定位，它将运行更平滑，但由于固定定位，包装不再适合框=\@user1330271这取决于它是如何使用的，看看这个@Andy你读了整个问题了吗？最好绝对地定位框。你试过
定位：固定？@未定义如果在框中使用固定定位，它将运行更平滑，但由于固定定位，包装不再适合框=\@user1330271这取决于它是如何使用的@Andy你读了整个问题了吗？就像我说的：避免滚动时出现小跳跃的另一种方法不是改变页边空白顶部，而是在y>=referencey之后将框的位置改为fixed。该解决方案的缺点是相对于列的大小有一个非常错误的行为。正如我所说的：避免滚动时出现小跳跃的另一种方法不是更改边距顶部，而是在y>=referencey之后将框的位置更改为fixed。该解决方案的缺点是相对于列大小而言，存在非常多的错误行为。