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

Wilson Usman
Wilson Usman
35,206 Points

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
Marc-Oliver Gern
Marc-Oliver Gern
8,747 Points

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

Nate Jonah
Nate Jonah
20,981 Points

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.

I Hou Tong
I Hou Tong
6,936 Points

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.

Wilson Usman
Wilson Usman
35,206 Points

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

I Hou Tong
I Hou Tong
6,936 Points

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.

Wilson Usman
Wilson Usman
35,206 Points

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.

I Hou Tong
I Hou Tong
6,936 Points

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.

Michael Hernandez
Michael Hernandez
9,746 Points

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.

Michael Stolp-Smith
Michael Stolp-Smith
4,855 Points

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

Anusha Lee
PLUS
Anusha Lee
Courses Plus Student 14,787 Points

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