How to stick fixed div of height more than viewport to body

Question

I know about the positioning of div (fixed, absolute and relative). I can attach a fixed div to body so that it will stick to the same position while scrolling body. Here I

Answer 1

With absolute position (in fixed position we have to hide scroll and set scrollTop instead of top):

$(document).scroll( function() {
    var offset = $(this).scrollTop() + $(window).height() - $('#sidebar').outerHeight();
    $('#sidebar').css('top', Math.max(0, offset));
});

* {
    margin: 0;
    padding: 0;
}

#content {
    height: 2000px;
    padding-right: 40%;
    background: red;
}

#sidebar {
    height: 1000px;
    position: absolute;
    width: 40%;
    top: 0; right: 0;
    background: orange;
}

fiddle