How to change the code so that the object moves in a specific div and not across the entire page?

Question

css

there is a code
<div id='object'></div>

#object {
    position: fixed;
    left: 0;
    top: 50%;
    height: 30px;
    width: 30px;
    background: black;
}

body {
    height: 3000px;
    background: grey;
}

var window_width = $(window).width() - $('#object').width();

var document_height = $(document).height() - $(window).height();

$(function () {
    $(window).scroll(function () {
        var scroll_position = $(window).scrollTop();
        var object_position_left = window_width * (scroll_position / document_height);
        $('#object').css({
            'left': object_position_left
        });
    });
});

and so, with the current code, the object moves when scrolling across the entire page, is it possible to make the object move only in a certain div?

Answer 1

leafo.net/sticky-kit
In general, on("scroll") checks that the element is within the top and bottom coordinates of the parent relative to the window and prevents it from exiting.