Currently in the process of coding my portfolio, I encountered an issue with incorporating two JavaScript/jquery codes together. Firstly, for the first section to be a full-page scroll using fullpage.js "plugin," and secondly, changing the navbar to be transparent until scrolling down to a specific point where it changes background and text color.
I have tried various solutions including jQuery.noConflict but haven't been successful. Can anyone provide some assistance?
Below is the snippet of my HTML/JavaScript code including the necessary links for 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>
If required, here is the CSS styling for the navbar's color transition:
.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;
}
Your help in resolving this issue would be greatly appreciated as I've spent hours attempting to find a solution without success. Thank you in advance for your response.