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

Question

我目前正在对我的投资组合进行编码，我希望我的第一部分稍后会是一张图片，成为一个完整的页面滚动，所以我使用了 fullpage.js“插件”并且它起作用了。然后，我想让我的导航栏透明，当我向下滚动到 600 像素时，它会改变背景和文本颜色，而且它也有效。

但问题是这两个 javascript/jquery 代码在一起时不起作用...我尝试了所有方法，例如 jQuery.noConflict 等...但没有任何效果，所以可以有人帮帮我吗？

这是我的 HTML/Javascript 代码，其中包含用于 fullpage.js 的所有 javascrip 链接:

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

如果需要，我将添加导航栏的 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 添加到您的 fullpage 函数中，如下所示:

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

它会起作用。