Javascript: $(window).scroll, $ not defined

Question

I'm pretty new at Javascript and I'm following some code from Code Pen to try and create a shadow effect underneath the nav bar when the page is scrolled. The code looks like this:

$(window).scroll(function() {
  if ($(window).scrollTop() > 10) {
    $('#navBar').addClass('floatingNav');
  } else {
    $('#navBar').removeClass('floatingNav');
  }
});

When I run this though, the console returns this error (in reference to the first line):

Uncaught ReferenceError: $ is not defined

I'm not sure how to resolve this. I've seen plenty of examples in other people's code where $(window).scroll works fine. Is there a way to define it? Am I missing something?

You need to add the jQuery library to your document: http://code.jquery.com/ — , Dec 05 '19 at 08:58

score 0 · Accepted Answer · answered Dec 05 '19 at 09:03

You need to add the jQuery framework for the $ to work. the $ symbol here denotes that jquery framework is used. add the following line above your <script> tag and run it again.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Javascript: $(window).scroll, $ not defined

1 Answers1