Position: sticky behavior on a child element whilst the parent is not sticky?

Solution 1:

It is not possible to use sticky in such case. The same effect can be achieved by other means though. You can simply use "fixed" positioning and the sticky child will stay were it was.

.site_header_child {    
  position:fixed;
  top:10px;
  background:#eee;
}

Demo: https://codepen.io/anon/pen/VMWovv