Javascript Affix not a function

Question

I've been working on a in a Bootply sandbox all day and encountered an issue when moving the identical code to a live server.

The sandbox is here and the affix works fine: http://www.bootply.com/wu2vXxkt5o#

On the live version I get the error and it refuses to load the elements (the three images)

TypeError: $(...).affix is not a function

http://nathan97.com is the live site.

The code in question:

/* activate sidebar */
$('#sidebar').affix({
  offset: {
    top: 235
  }
});

Answer 1

First move cover.js after affix.js, otherwise affix function won't be found.

Second, scripts in the head section get invoked before the body elements get rendered so $('#sidebar') will not be found. Wrap your functions in $(document).ready to invoke the code after the body is done rendering.

correct order

<script type="jquery.js"></script>
<script src="cover.js"></script>
<script src="affix.js"></script>

cover.js

$(document).ready(function() {

    $('#sidebar').affix({
      offset: {
        top: 235
      }
    });

   // ...

});