How to fix a block using position sticky, showing all its content, if the height of the block is greater than the height of the window?

Question

css

This is what you need
sticky01.blogspot.com/2015/05/1.html
(block on the right)

If the height of the browser window is less than the height of the side column, then either the bottom or top edge of the column will stick, otherwise only the top

Is this possible with css (position sticky)? I use Bootrsap 4
Or without js in any way?

Answer 1

Did it like this:

<div class="row">
    <div class="col-auto d-flex">
        <div class="sticky">
            ...
        </div>
    </div>
    <div class="col">
        ...
    </div>
</div>

.top-0 {
    top: 0 !important;
}
.bottom-0 {
    bottom: 0 !important;
}
.left-0 {
    left: 0 !important;
}
.right-0 {
    right: 0 !important;
}

'use strict';
$(document).ready(function() {
    let $window = $(window);
    let stick = (function () {
        let $sticky = $('.sticky');
        let $stickyParent = $sticky.parent();
        let windowTopPrevious = 0;
        $stickyParent.addClass('align-items-start');
        $sticky.addClass('position-sticky top-0');
        return function () {
            let $windowHeight = $window.height();
            let windowTop = $window.scrollTop();
            let windowBottom = windowTop + $windowHeight;
            let stickyTop = $sticky.offset().top;
            let $stickyHeight = $sticky.outerHeight();
            let stickyBottom = stickyTop + $stickyHeight;
            let stickyTopRelativeParent = $sticky.position().top;
            let stickyBottomRelativeParent = stickyTopRelativeParent + $stickyHeight;
            if ($windowHeight >= $stickyHeight) {
                if (!$sticky.hasClass('top-0')) {
                    $stickyParent.removeClass('align-items-end').addClass('align-items-start');
                    $sticky.removeClass('bottom-0').addClass('top-0');
                }
            } else if (windowTop > stickyTop || windowBottom < stickyBottom) {
                if (windowTop > windowTopPrevious) {
                    if ($sticky.hasClass('top-0')) {
                        $sticky.css('margin-top', stickyTopRelativeParent + 'px').removeClass('top-0');
                    }
                    if (windowBottom > stickyBottom && !$sticky.hasClass('bottom-0')) {
                        $stickyParent.removeClass('align-items-start').addClass('align-items-end');
                        $sticky.css('margin-top', '0').addClass('bottom-0');
                    }
                } else if (windowTop < windowTopPrevious) {
                    if ($sticky.hasClass('bottom-0')) {
                        $stickyParent.removeClass('align-items-end').addClass('align-items-start');
                        $sticky.css('margin-top', stickyTopRelativeParent + 'px').removeClass('align-self-end bottom-0');
                    }
                    if (windowTop < stickyTop && !$sticky.hasClass('top-0')) {
                        $sticky.css('margin-top', '0').addClass('top-0');
                    }
                }
            }
            windowTopPrevious = windowTop;
        }
    })();
    if ($window.scrollTop() > 0) {
        stick();
    }
    $window.on({
        'scroll': stick
    });
});

Answer 2

https://caniuse.com/#search=sticky
It's too early to implement this, do it in js.

Answer 3

If you do not need support for ancient browsers, then of course use it.
https://codepen.io/zavvla/pen/MPYrbp
ps just note that if any parent has oveflow: hidden it will not work.