Question

I was looking at the SO source code to see how they are doing the div on the right side bar that changes from relative to fixed position.

I saw that the SO JS library is pretty much all included into the page with this code below…

My question is how is the code included like this, is this something like the RequireJS or labJS javascript code that loads the files only when they are needed or something like that?

<script type="text/javascript">
StackExchange.using.setCacheBreakers({
    "js/prettify-full.js": "0324556b7bf7",
    "js/moderator.js": "a38ca3c6143d",
    "js/full-anon.js": "8fcefa158ad3",
    "js/full.js": "a168b3deac0f",
    "js/wmd.js": "688233b2af68",
    "js/third-party/jquery.autocomplete.min.js": "e5f01e97f7c3",
    "js/mobile.js": "97644ef9b7d4",
    "js/help.js": "7f83495f785a",
    "js/tageditor.js": "75954ba7b6f1",
    "js/tageditornew.js": "9d9998359a54",
    "js/inline-tag-editing.js": "364e12111b4b",
    "js/mathjax-editing.js": "a47e02eb0282",
    "js/revisions.js": "63c88065da1f"
});
</script>

Answer 1

My question is how is the code included like this, is this something like the RequireJS or labJS javascript code that loads the files only when they are needed or something like that?

Yes, but not one of the two – it’s a very tiny home-grown solution. The snippet you posted just lets the JavaScript know what cache breakers to use if including a file; it doesn’t actually include them. That only happens when the file is actually needed.

I wrote a blog post that gives some insight into what’s happening there.