CSS layout | CSS Layout with sticky sidebar and detect scroll by jQuery

This time, a customer, ask for develop a structure like the one you see below.

See the Pen
CSS Layout | CSS Layout with sticky sidebar and detect scroll by jQuery by Andrea Pizzigalli (@Pizzi)
on CodePen.

The requests are:
1° Need to have a content area, split in two blocks, one with 100% height, and other with fix height in sticky position.
2° Need to interact with jQuery for update div properties based on position on screen.
And the problems / Solutions:
1° For element in sticky position, we can use

position:sticky;

2° If Use

position:sticky;

can’t use

 $(window).scroll(function() {} 

, but we can use something different …

Let’s start form the structure:

<div id="stiky">
<div class="header">
header</div>
<div class="container home_conts">
<div class="inner_home_conts">
Lorem ipsum dolor sit amet, eripuit facilisi cu eam, cu dicit libris vix. Et vel novum verear insolens, ignota suavitate reprimique ad sit. Amet admodum aliquando ea mel, vim aliquip temporibus at. Nibh tation per in. Ex pri blandit splendide, recteque incorrupte ei vel. Ipsum mnesarchum voluptatibus sed ea, no minim tibique eos, vis eirmod explicari elaboraret ne.</div>
<div class="sidebar">
sidebar sidebar</div>
</div>
<div class="footer">
footer</div>
</div>

Basically we have a div ‘#stiky’ that wrap the structure, an header ‘.header’, a div ‘.container’, that contain two child div, ‘.inner_home_cont’ and ‘.sidebar’.
The trick is that “sidebar” has a “Sticky” position:

.sidebar{
height:auto;
position: -webkit-sticky;
position: sticky;
top: 0;
max-height: 12rem;
}