Again thank you @bartekkustra.
I think i did what you adviced me to do and still not working
here is my custom code
<script type="text/javascript" src="https://cdn.rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>
<script>
$(document).ready(function() {
function isInView(el) {
var top = el.offsetTop;
var left = el.offsetLeft;
var width = el.offsetWidth;
var height = el.offsetHeight;
while(el.offsetParent) {
el = el.offsetParent;
top += el.offsetTop;
left += el.offsetLeft;
}
return (
top < (window.pageYOffset + window.innerHeight) &&
left < (window.pageXOffset + window.innerWidth) &&
(top + height) > window.pageYOffset &&
(left + width) > window.pageXOffset
);
}
$(window).scroll(function() {
// page 1
if(isInView('#Coronarographie')) {
$('#BoutonCoro').addClass('active');
} else {
$('#BoutonCoro').removeClass('active');
}
// page 2
if(isInView('#Reanimation')) {
$('#BoutonRea').addClass('active');
} else {
$('#BoutonRea').removeClass('active');
}
// page 3 ...
});
$('#fullpage').fullpage({
//Navigation
menu: false,
lockAnchors: false,
anchors: ['firstSlide','Hospitalier', 'Scintigraphie','Reanimation','Coronarographie'],
navigation: true,
navigationPosition: 'right',
navigationTooltips: ['firstSlide','Hospitalier', 'Scintigraphie','Reanimation','Coronarographie'],
showActiveTooltip: false,
slidesNavigation: true,
slidesNavPosition: 'bottom',
//Scrolling
css3: true,
scrollingSpeed: 900,
autoScrolling: true,
fitToSection: true,
fitToSectionDelay: 1000,
scrollBar: false,
easing: 'easeInOutCubic',
easingcss3: 'ease',
loopBottom: false,
loopTop: false,
loopHorizontal: true,
continuousVertical: false,
normalScrollElements: '#element1, .element2',
scrollOverflow: false,
touchSensitivity: 15,
normalScrollElementTouchThreshold: 5,
//Accessibility
keyboardScrolling: true,
animateAnchor: true,
recordHistory: true,
//Design
controlArrows: true,
verticalCentered: true,
controlArrowColor: '#0000FF',
sectionsColor : [],
resize : false,
paddingTop: '0',
paddingBottom: '0',
fixedElements: '#header, .footer',
responsive: 0, //backwards compabitility with responsiveWiddth
responsiveWidth: 0,
responsiveHeight: 0,
//Custom selectors
sectionSelector: '.section',
slideSelector: '.slide',
//events
onLeave: function(index, nextIndex, direction){},
afterLoad: function(anchorLink, index){},
afterRender: function(){},
afterResize: function(){},
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){}
});
});
</script>
<style>
/* Blend modes */
.mbm-normal{mix-blend-mode: normal;}
.mbm-multiply{mix-blend-mode: multiply;}
.mbm-screen{mix-blend-mode: screen;}
.mbm-overlay{mix-blend-mode: overlay;}
.mbm-darken{mix-blend-mode: darken;}
.mbm-lighten{mix-blend-mode: lighten;}
.mbm-color-dodge{mix-blend-mode: color-dodge}
.mbm-color-burn{mix-blend-mode: color-burn;}
.mbm-hard-light{mix-blend-mode: hard-light;}
.mbm-soft-light{mix-blend-mode: soft-light;}
.mbm-difference{mix-blend-mode: difference;}
.mbm-exclusion{mix-blend-mode: exclusion;}
.mbm-hue{mix-blend-mode: hue;}
.mbm-saturation{mix-blend-mode: saturation;}
.mbm-color{mix-blend-mode: color;}
.mbm-luminosity{mix-blend-mode: luminosity;}
</style>
<script>
$('a').click(function(e) {
var anchor = $(this), h;
h = anchor.attr('href');
e.preventDefault();
anchor.animate({'opacity' : 100}, 1500, function() {
window.location = h;
});
});
</script>
So i think it’s what it have to look like. knowing that, for example, “Coronarographie” is in ID for the section and “BoutonCoro” is the ID of the button that have to be colored.
If you would and could have a look, my share link is : https://preview.webflow.com/preview/parallax2?preview=91902a7eadaf87ad0bb5a3d3fce732632 . My published page is : http://parallax2.webflow.io/2
Thank you very much for your patience.
which is in Webflow team now, maybe he will find the way.
Unfortunately, not all plugins can be compatible with each other.