scroll add class

by ian_smithz

HTML

<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-blue">

      <div class="container">

        <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span><span class="label ml-2 t-1 screwfix-bold">MENU</span>
        </button>

        <div class="navbar-collapse justify-content-md-center collapse" id="navbar" style="">

          <ul class="navbar-nav" id="site-navigation">
            <li class="nav-item">
              <a class="nav-link" href="/">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/exhibitors/">Exhibitors</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/visiting/">Visiting</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/contact/">Contact</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://screwfixmedia.co.uk/" target="_blank" rel="noopener">Press Office <span class="sr-only">This link opens in a new window</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://screwfixlive-2018.reg.buzz/" target="_blank" rel="noopener">Register Now <span class="sr-only">This link opens in a new window</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.screwfix.com/">Screwfix.com</a>
            </li>
          </ul>

        </div>

      </div>

    </nav>
<p>Paragraph - <span>Scroll happened!</span></p>

<p>Paragraph - <span>Scroll happened!</span></p>

<p>Paragraph - <span>Scroll happened!</span></p>

<p>Paragraph - <span>Scroll happened!</span></p>

<p>Paragraph - <span>Scroll happened!</span></p>

<p>Paragraph - <span>Scroll happened!</span></p>

<p>Paragraph -...

CSS

div {
    color: blue;
  }
  p {
    color: green;
  }
  span {
    color: red;
    display: none;
  }

JavaScript

$( window ).scroll(function() {
  $( "span" ).css( "display", "inline" ).delay(2000).fadeOut();
});