Hi, I was looking for this feature too.
It was nowhere to be found so I made it myself, if someone is still interested I will post the code bellow which you will have to paste in a JavaScriptExtension.
Note: the extension was made in a few hours and it’s poorly tested, you may need to change some numbers depending on your side bar configuration. I will likely make some changes to the code and update it. When a page has very little content(just a few lines) the side bar doesn’t have the best looks.
I will appreciate any advice on how to improve the code.
require(['jquery'], function($) {
if($(body).height() > $(window).height()){
$("#leftPanels").css({"right": "83.33333333333334%","position" : "fixed", "height" : "95%" , "top" : "5%","overflow" : "auto"});
}else{
$("#leftPanels").css({"right": "83.33333333333334%","position" : "fixed", "height" : $(contentcontainer).height(), "top" : "5%","overflow" : "auto"});
}
var intervalId = window.setInterval(function(){
if($(body).height() < $(window).height()){
$("#leftPanels").css({"right": "83.33333333333334%","position" : "fixed", "height" : $(contentcontainer).height() , "top" : "5%","overflow" : "auto"});
}
}, 200);
$(window).scroll(function() {
var scrollYpos = $(document).scrollTop();
if($(body).height() > $(window).height()){
if (scrollYpos > 50) {
$("#leftPanels").css({"right": "83.33333333333334%","position" : "fixed", "height" : "100%" , "top" : "0%","overflow" : "auto"});
if($(window).scrollTop() + $(window).height() > $(document).height() - 37){
$("#leftPanels").css({"right": "83.33333333333334%","position" : "fixed", "height" : $(window).height() * 0.97 + $(document).height() - $(window).scrollTop() - $(window).height() , "top" :"0%" ,"overflow" : "auto"});
}
}
else {
$("#leftPanels").css({"right": "83.33333333333334%","position" : "fixed", "height" : $(window).height() * 0.95 + scrollYpos , "top" : 50 -scrollYpos,"overflow" : "auto"});
}
}
});
});