title: Scrollspy not highlighting nav links
body: <p>So I'm just making a mockup web template and would like active nav links to change upon scroll position. I was looking at using javascript but instead have moved to scroll spy as it seems simple enough.</p>
  
  <p>However this is my first time using bootstrap and I cannot seem to get scroll spy to work and have looked online for hours through other related topics and cant seem to find the issue and believe I may be overlooking something simple. </p>
  
  <p>help...</p>
  
  <p><a href="https://jsfiddle.net/qfsguu06/1/" rel="nofollow noreferrer">https://jsfiddle.net/qfsguu06/1/</a></p>
  
  <pre><code>$('body').scrollspy({ target: '.nav', offset: 50 })
  
  body {position: relative;}
  
  &lt;body&gt;
  &lt;header&gt;
    &lt;ul class="nav"&gt;
      &lt;li class="active"&gt;&lt;a href="#landing"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#portfolio"&gt;Portfolio  &lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#about"&gt;About&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;/header&gt;
  </code></pre>
  
  <p>--edit-------------</p>
  
  <p>so now i have this (i will just post with pug and sass code as that's what im using) but still not working and i cant wrap my head around it.</p>
  
  <pre><code>body(data-spy="scroll" data-target=".navbar" data-offset="50")
    header
    nav
      ul(class="navbar")
        li(class="active")
          a(href="#landing") Home
        li
          a(href="#portfolio") Portfolio  
        li
          a(href="#about") About
        li
          a(href="#contact") Contact
  
  body
    position: relative
  
  .navbar
    position: fixed
    display: flex
    justify-content: flex-end
    list-style: none
    padding: 2rem 1rem
    width: 95%
  li
    padding: 0 1rem
  
  .navbar li
    a:hover
    color: black
    transition: all .1s ease-in-out
    font-weight: bold
  
  .active
    a
    color: black
    font-weight: bold
    transition: all .3s linear
  </code></pre>