title: Can anyone enlight on why scrollspy and jquery are not working here?
body: <p>I'm working on portfolio project via freeCodeCamp and I'm stuck with 2 problems that I failed to fix so far.</p>
  
  <p>1) I want to use Scrollspy (I discovered it on w3c) to automatically update links in a navigation list based on scroll position. I followed the tutorial (<a href="https://www.w3schools.com/bootstrap/bootstrap_scrollspy.asp" rel="nofollow noreferrer">https://www.w3schools.com/bootstrap/bootstrap_scrollspy.asp</a>) and tried to understand the exemple, but I can't find what is wrong with my code. It's not working.</p>
  
  <p>2) Considering my first problem, I have been thinking that maybe my problem comes from adding attribute to the body (it's the first time I try to use body element in codepen as from the tutorial I assumed codepen includes it automatically).</p>
  
  <p>So I had the idea to use jQuery to add attributes to the body element. But it appears that jQuery is not working. I tried to use the basic code from FCC lesson, like making a button bounce, but nothing happens.</p>
  
  <p>(I think I have integrated bootstrap library and added jQuery.js via codepen settings so I can't find what's the problem here).</p>
  
  <p>Here is my work in progress if you have a few minutes to check the code: <a href="https://codepen.io/pqdeguingand/full/gvgjPG" rel="nofollow noreferrer">https://codepen.io/pqdeguingand/full/gvgjPG</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body data-spy="scroll" data-target=".navbar" data-offset="50"&gt;
    &lt;nav class="navbar navbar-default navbar-fixed-top"&gt;
      &lt;div class="container-fluid"&gt;
        &lt;div class="navbar-header"&gt;
          &lt;img src="http://stickersign.eu/wp-content/uploads/2016/07/logo.png" alt="logo" class="img-responsive navbar-brand"&gt;
        &lt;/div&gt;
        &lt;ul class="nav navbar-nav navbar-right"&gt;
          &lt;li&gt;&lt;a href="#presentation"&gt;Présentation&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#realisations"&gt;Réalisations&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
    &lt;div id="presentation" class="container-fluid"&gt;
      &lt;h1&gt;Nous sommes Sticker Sign&lt;/h1&gt;
    &lt;/div&gt;
    &lt;div id="realisations" class="container-fluid"&gt;
      &lt;h1&gt;Réalisations&lt;/h1&gt;
    &lt;/div&gt;
    &lt;div id="contact" class="container-fluid"&gt;
      &lt;h1&gt;Contactez-nous&lt;/h1&gt;
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I hope you can help me figure this out, Google failed for now!</p>
  
  <p>Thanks a lot</p>