Fullpagejs & Webflow Conflict

Design help Custom code
8

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.