Question

我目前正在为我的投资组合编码，我想让我的第一部分以后会成为一个整页滚动，所以我使用了fullpage.js＆＃34;插件＆＃34;它起作用了。然后，我想让我的导航栏透明，当我向下滚动到例如600px时，它会改变背景和文本颜色，并且它也有效。

但问题是这两个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选项添加到您的整页功能中，请执行以下操作：

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

它会起作用。

两个jQuery函数在它们在一起时没有工作

1 个答案: