`container sidebar-sticky` and `container` at the same time

[yalov]

sidebar.html:

<div class="sidebar">
    <div class="container">
         <!--site.title, site.description and top posts' links-->
    </div>

    <div class="container sidebar-sticky">
        <!--about, contact me, github link, social, etc -->
    </div>
</div>

So, it's ok when inner divs are small enough to not intersect in the middle.

However, while they are becoming larger, at some point they are overlapped. Described fix overflow-y: auto; create scrolling (if one of them don't fit to screen), but they are still overlaps.

How to create that behavior:

• <div class="container"> bounds to top,
• <div class="container sidebar-sticky"> bounds to bottom,
• if they are not fit to sidebar, than sidebar scrolls and they are not overlaps (one under another)

[yalov]

Probably, I should ask @JuanjoSalvador

[JuanjoSalvador]

Hmm. It seems like current links (not Top Posts) are fixed to sidebar into the CSS. I cannot test it now, but I think I can help you with this in two-three days.

Anyway, if anyone can help instead of me...

[yalov]

@JuanjoSalvador, any luck with it?

[JuanjoSalvador]

Sorry I haven't fixed it yet. I'm working in a new and fresh Jekyll theme, I can put in it a function to get the recent posts.

[yalov]

UPD. ok, clean-css approach is flex.

.sidebar{
  display: flex;
  flex-direction: column;
  height: 100%;
}
.container{
  flex: 1 0 auto;
}
.sidebar-sticky{
  flex: 0 0 auto;
}

---

OLD. there is javascript.

sidebar.html

<div class="sidebar">
    <div class="container">
         <!--site.title, site.description and top posts' links-->
    </div>
    <div class="container sidebar-sticky">
        <!--about, contact me, github link, social, etc -->
    </div>
</div>
 <script>
function check() {
  var top = document.getElementsByClassName('container')[0];
  var bottom = document.getElementsByClassName('container sidebar-sticky')[0];
  var sidebar = document.getElementsByClassName('sidebar')[0];
  if (overlaps( top, bottom )) {
    sidebar.innerHTML = sidebar.innerHTML.replace(new RegExp('</div>\\s+<div class="container sidebar-sticky">','m'),'<br><!--overlaps-->');
  }
  else {
    sidebar.innerHTML = sidebar.innerHTML.replace(new RegExp('<br><!--overlaps-->','g'),'</div>\\n<div class="container sidebar-sticky">');
  }
};
check();
$(window).resize(function () {waitForFinalEvent(check, 70, "some unique string");});
</script>

overlaps.js

var overlaps = (function () {
    function getPositions( elem ) {
        var pos, width, height;
        pos = $( elem ).position();
        width = $( elem ).width();
        height = $( elem ).height();
        return [ [ pos.left, pos.left + width ], [ pos.top, pos.top + height ] ];
    }
    function comparePositions( p1, p2 ) {
        var r1, r2;
        r1 = p1[0] < p2[0] ? p1 : p2;
        r2 = p1[0] < p2[0] ? p2 : p1;
        return r1[1] > r2[0] || r1[0] === r2[0];
    }
    return function ( a, b ) {
        var pos1 = getPositions( a ),
            pos2 = getPositions( b );
        return comparePositions( pos1[0], pos2[0] ) && comparePositions( pos1[1], pos2[1] );
    };
})();

waitForFinalEvent.js

var waitForFinalEvent = (function () {
  var timers = {};
  return function (callback, ms, uniqueId) {
    if (!uniqueId) {
      uniqueId = "Don't call this twice without a uniqueId";
    }
    if (timers[uniqueId]) {
      clearTimeout (timers[uniqueId]);
    }
    timers[uniqueId] = setTimeout(callback, ms);
  };
})();

head.html

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="{{ site.baseurl }}/scripts/overlaps.min.js"></script>
    <script src="{{ site.baseurl }}/scripts/wait-for-final-event.min.js"></script>