将Javascript从Codepen传输到main.js

Question

I'm working on my personal portfolio on Codepen and I have a little bit of trouble of moving the code to desktop files. The HTML and CSS are working perfect. But when I move the Javascript to it's own file it doesn't work at all or sometimes only the first bit works.

HTML of the Navbar that the Javascript below is for:

 <nav class="navbar navbar-expand-md navbar-dark bg-company-red fixed-top">
    <a class="navbar-brand" href="#intro">brezitski</a>
    <button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-item nav-link active" href="#about">About <span class="sr-only">(current)</span></a>
        <a class="nav-item nav-link" href="#projects">Projects</a>
        <a class="nav-item nav-link" href="#contact-form">Contact</a>
      </div>
    </div>
  </nav>

Javascript code:

$(window).scroll(function(){
$('nav').toggleClass('scrolled', $(this).scrollTop() > 50);
});

$(".navbar-nav a").click(function(event) {
    if (!$(this).parent().hasClass('dropdown'))
        $(".navbar-collapse").collapse('hide');
});

The first function simply adds a class so the navbar can get a different color when scrolled.

The second one is supposed to hide the navbar after you click on an anchor on mobile res.

It works like charm in my codepen: https://codepen.io/Sarithan/pen/pOmxPy

This is how I'm linking my files before the

<!-- Bootstrap Required-->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

  <!--Custom Scripts-->
  <script src="js/main.js"></script>

Answer 1

I think the easiest way to accomplish that is by using codepen's "Debug Mode" which you can find under "Change View". Then "ctrl + u" and save it to a local html file.