I have a div with a class .header, I want its background color to change to transparent on scroll. How can I do that on javascript? I use fullpage.js plugin and have only 2 sections btw.
<body>
<div class="header">
CONTENTS HERE
</div>
<div id="fullPage">
<div class="section bg">
CONTENTS HERE
</div>
<div class="section aboutme">
CONTENTS HERE
</div>
</div>
</body>
.header {
background-color: rgba(0, 0, 0, 0.2);
text-align: center;
padding: 8px 15px;
overflow: hidden;
min-height: 46px;
position: absolute;
width: 100%;
top: 0;
z-index: 999;
You can use the fullpage.js state classes or the callbacks to accomoplish that.
Here's an example using fullpage state classes: https://codepen.io/alvarotrigo/pen/VwbxbYR
.fp-viewing-1-0 button{
background: blue;
}
fp-viewing-1-0 basically means fullpage.js is on the 2nd section and the 1st slide.
So, both sections and slides use a 0 based index.
Here's another example using callbacks: https://codepen.io/alvarotrigo/pen/XbPNQv
More examples in the the fullpage.js documentation
afterLoad: function(origin, destination, direction){
var loadedSection = this;
//using index
if(origin.index == 2){
alert("Section 3 ended loading");
}
//using anchorLink
if(origin.anchor == 'secondSlide'){
alert("Section 2 ended loading");
}
}