An element with position: sticky behaves like a normal element until it reaches a scroll threshold, then it sticks in place. It needs no JavaScript.

Sticky header

.lotgrafix-header {
    position: sticky;
    top: 0;
    z-index: 999;
    background: #fff;
}

Sticky sidebar

.lotgrafix-sidebar {
    position: sticky;
    top: 20px;
    align-self: start;
}

Inside a flex or grid container, align-self: start is required. Otherwise the sidebar stretches to the full height and has nothing to stick against.

Sticky with the WordPress admin bar

.admin-bar .lotgrafix-header {
    top: 32px;
}

@media ( max-width: 782px ) {
    .admin-bar .lotgrafix-header {
        top: 46px;
    }
}

Why sticky does not work

• No top, bottom, left or right value is set.
• A parent has overflow: hidden, overflow: auto or overflow: scroll.
• The parent is as tall as the sticky element, so there is no room to scroll.