Two jQuery function didn't work when they are together

Question

I'm currently coding my portfolio, and I wanted to have my first section which will be an image later, to be a full page scroll, so I used the fullpage.js "plugin" and it worked. Then, I wanted to have my navbar transparent, and when I scroll down to, for example, 600px, it changes the background and text color, and it also worked.

But the problem is that these two javascript/jquery codes didn't work when they are together... I tried everything, like jQuery.noConflict etc... but nothing worked, so can anyone help me, please?

Here is my HTML/Javascript code with all the javascrip link for fullpage.js to work in the :

<script type="text/javascript">
    $(document).ready(function() { 
//Automatically scroll the first section, then normal scroll
        $('#fullpage').fullpage({
            scrollOverflow: true,
            normalScrollElements: '.a-text-field'
        });
    });
    $(window).scroll(function() { 
//Change navbar background/text color after scrolling 650px
        $('nav').toggleClass('scrolled', $(this).scrollTop() > 650);
        $('a').toggleClass('scrolledlink', $(this).scrollTop() > 650);
    });

</script>
</head>

If needed, i'm adding the CSS of the navbar for changing background color and text color :

.nav {
font-family: "brandon-grotesque", Arial, Helvetica, sans-serif;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.3em;
position: fixed;
width: 100%;
height: 60px;
z-index: 9999999;
transition: 500ms ease;
background: transparent;
}

.nav.scrolled {
font-family: "brandon-grotesque", Arial, Helvetica, sans-serif;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.3em;
position: fixed;
width: 100%;
height: 60px;
background-color: #F3F3F3;
border-bottom: 1px solid rgba(49, 49, 49, 0.1);
z-index: 99999;
}

.nav>ul>li>a {
position: relative;
text-decoration: none;
color: white;
transition: 0.30s;
}

.a.scrolledlink {
position: relative;
text-decoration: none;
color: black;
transition: 0.30s;
}

I hope someone can help me to find a solution to my problem because it's something I really want to do, and I'm trying it for hours without finding any solution... Thank's by advance for your response.

Answer 1

The reason why the second function is not firing is because there is no scroll event taking place. If you add the option, scrollBar: true to your fullpage function like this:

$(document).ready(function() {
  //Automatically scroll the first section, then normal scroll
  $('#fullpage').fullpage({
    scrollOverflow: true,
    normalScrollElements: '.a-text-field',
    scrollBar: true
  });
});

It will work.