Question

I’m trying to build a right box who follows the user scrolling:

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

});

The code works just fine. The columns sizes are irrelevant, because all I do is change the margin-top, it means the columns and wrapper always gets a new size. The downside of the code is little smalls jumps while the user is scrolling.

An alternative to avoid the small jumps while scrolling is not to change the margin-top, but change the position of the box to fixed after y >= referencey. The downside of the solution is a very buggy behavior relative to the columns sizes, because when I change the class to fixed, it’s does not occupy space inside the right column anymore, if the left column is smaller, a whole set of new bugs appear.

Answer 1

I came up with a solution that don’t fix the problem, but work around it. What I have done is to scroll the box after the user stop scrolling. A different effect but no little jumps (and it looks cool too).

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

});