Facebook sidebar recreation.(I simply don't know its name...) Using RequireJS and jQuery, but you can easily grab useful parts!

sidebar.js

/**
 * @file UI.sidebar
 * Facebook sidebar recreation
 */

define(["jquery"],function($){
  
  //from http://stackoverflow.com/a/17961266/2281355
  var isAndroid = navigator.userAgent.indexOf('Android') >= 0;
  var webkitVer = parseInt((/WebKit\/([0-9]+)/.exec(navigator.appVersion) || 0)[1],10) || void 0;
  var isNativeAndroid =  webkitVer <= 534 || ( isAndroid && navigator.vendor.indexOf('Google') == 0 );

  //your sidebar, specify it below
  var $sidebar=$("#sidebar-affix");
  //your sidebar need to be wrapped by a block element.
  //this is useful when you are using grid system since the snippet
  // will keep the dimension(height/width) for you.
  var $parent =$sidebar.parent();

  //you can set for fixed navbar
  var offset=60;
  //you can set custom padding of the sidebar.
  //the sidebar will apply next beheavior to avoid
  // these regions just like bootstrap affix.
  var top   =0,
      bottom=$("#footer").outerHeight(true);

  var isFirst=true;
  var heightDelta=0;

  //cache its dimension
  var reMeasure=function(){
    if(isNativeAndroid)return;

    var sbw=$parent.width();
    var sbh=$sidebar.height();
    var pos=$sidebar.css("position");

    //Sometimes inner margin collapses, causing wrong 
    // height calculation.
    var needDelta=(pos=="static"||pos=="relative");

    if(sbw!=$sidebar.width()){
      $sidebar.css("width",sbw);
      //console.log("w set");
    }
    
    if($parent.css("position")=="fixed"){
      //remove inline css
      //taken over by pure css classes
      $sidebar.css("top","");
      $parent.css("height","");
      return;
    }

    var ph=$parent.height();
    //for comparing their height
    if(needDelta)
      sbh+=heightDelta;

    if(isFirst){
      //ensure that it is absolute
      // or we will miss the margin of 
      // the inner elements
      //also calculate delta
      var sh1=$sidebar.height();
      $sidebar.css("position","absolute");
      $parent.css("height",$sidebar.height());
      heightDelta=$sidebar.height()-sh1;
      $sidebar.css("position","relative");
      //console.log("h set first",heightDelta);
      isFirst=false;
    }else if(sbh!=ph){
      //console.log("h set",sbh,bef);
      $parent.css("height",sbh);
    }
  };

  var prevScr=-1;
  var w=$(window);

  var sidebarHandler=function(){

    if(isNativeAndroid)
      return;

    //mobile device
    if($parent.css("position")=="fixed")
      return;

    var isFixed=$sidebar.css("position")=="fixed";
    var scr=w.scrollTop();
    var ot=$sidebar.offset().top;
    var pt=$parent.offset().top;
    var wh=w.height();
    var ph=$(document).height();
    var oh=$parent.outerHeight(true);
    var delta=scr-prevScr;

    if(scr<top){
      //avoid top
      if(isFixed)
        $sidebar.css({position:"absolute",top:top});

    }else if(scr+wh>ph-bottom){
      //avoid bottom
      if(isFixed){
        $sidebar.css({position:"absolute",top:ph-oh-offset-bottom});
      }
      
    }else if(delta<0){
      //scroll upward
      if(isFixed&&ot-scr!=offset){
        $sidebar.css({position:"absolute",top:ot-offset});
      }else if(!isFixed&&ot-offset>scr){
        $sidebar.css({position:"fixed",top:offset});
      }
    }else{
      //scroll downward
      if(isFixed&&(ot-scr==offset||ot+oh!=scr+wh)){
        if(wh<oh){
          $sidebar.css({position:"absolute",top:ot-pt});
        }
      }else if(!isFixed&&ot+oh<scr+wh){
        $sidebar.css({position:"fixed",top:wh<oh?wh-oh:offset});
      }
    }

    reMeasure();

    prevScr=scr;
  };

  $(reMeasure);//reMeasure immediately

  //delegate
  w.on("resize",reMeasure);
  w.on("scroll",sidebarHandler);

  return $sidebar;
  
});