两个jQuery函数在一起时不起作用

Question

我当前正在编码我的投资组合，我想拥有我的第一部分，该部分将是稍后的图像，成为完整页面滚动，所以我使用了fullpage.js。"而且奏效了。然后，我想让我的Navbar透明。

但问题是这两个JavaScript/jQuery代码在在一起时不起作用...我尝试了所有内容，例如jQuery.noConflict等...但是什么都没有，所以有人可以帮助我吗？

这是我的html/javascript代码，其中包含所有javascrip链接，用于fullpage.js，可以在：

中工作

<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>

如果需要，我正在添加Navbar的CSS，以更改背景颜色和文本颜色：

.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;
}

我希望有人可以帮助我找到解决我的问题的解决方案，因为这是我真正想做的事情，而且我正在尝试几个小时而没有找到任何解决方案...感谢您的回复。

Answer 1

第二个功能未触发的原因是因为没有发生滚动事件。如果添加了该选项，则将scrollBar: true添加到整个页面函数中：

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

它将起作用。