Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Using jQuery Plugins Add a Sticky Navigation Bar Adding Sticky Navigation

Uncaught TypeError: $(...).sticky is not a function

I've run out of ideas here. I keep getting the same error no matter what I do.

$(document).ready(function() {
 $('.header-container').sticky();
});

I have jquery.js file before the sticky.js file also.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://example.com/js/jquery.sticky.js"></script>

Here's the full browser error:

(anonymous function)    @functions.js:241
j    @functions.js:2
k.fireWith   @functions.js:2
m.extend.ready   @functions.js:2
J   @functions.js:2

Hi Wilson, It happend to me as well. Same error message until I replaced all the script links in the html files with:

<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/animsition/jquery.animsition.min.js"></script>
<script src="js/sticky/jquery.sticky.js"></script>
<script src="js/main.js"></script>

6 Answers

I had this same problem. I solved it by using the latest versions of jQuery (3.2.1) and Sticky (1.0.4) instead. In the video (and in the project files), Dave uses jQuery 1.11.2 and Sticky 1.0.0, which by now are couple of years old at least.

<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="js/animsition/jquery.animsition.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.sticky/1.0.4/jquery.sticky.js"></script>
<script src="js/main.js"></script>

I used cdn but you could download the files and add them to your project folder, obviously.

http://mysite.com/js/jquery.sticky.js

Not sure if you're trying to hide your actual site domain or not but that ends up giving a 404 error. sticky.js is never loaded because you're pointing to a source that doesn't exist.

Yes, it's a private website I'm working on.

Hmmm. Then these are the only other things that I can think:

1) Did you double check your file path? 2) Since it's on a private website, are the file permissions set properly? 3) You can also try using https://api.jquery.com/jquery.getscript/. You shouldn't load the script that way but you can see if sticky.js is being loaded at all.

I Hou Tong Looks like I solved the problem. When I reversed the javascript files it worked. I don't know why, but it does. I thought based on the tutorial, jquery should come before sticky, but not in my case.

I wonder if there's something else broken on my code.

Glad you got it to work, but something is definitely wrong. sticky.js seems to be a jQuery plugin which means it would require jQuery to be included first before including sticky.js. Only way it would work is if you have jQuery included elsewhere, before you include sticky.js.

I am having the same problem. I am using the workspace provided and have even tried moving on to the next video where the workspace is correctly filled in and it still won't work.

I am having the same problem. Checked syntax and everything. This isn't working.

After two years, I still face the same problem. The sticky header is not working.