scroll js animation

I'm starting in the area of web programming and I came across a problem during my studies: I want to do a simple animation using the js code below:

animeScroll.js

  // Debounce do Lodash
  const debounce = function(func, wait, immediate) {
    let timeout;
    return function(...args) {
      const context = this;
      const later = function() {
        timeout = null;
        if (!immediate) func.apply(context, args);
      };
      const callNow = immediate && !timeout;
      clearTimeout(timeout);
      timeout = setTimeout(later, wait);
      if (callNow) func.apply(context, args);
    };
  };


// anima elementos
const target = document.querySelectorAll('[data-anime]');
const animationClass = 'animate';

function animeScroll(){
    const windowTop = window.pageYOffset + ((window.innerHeight * 3) / 4);
    target.forEach(function(element){
        if ((windowTop) > element.offsetTop) {
            element.classList.add(animationClass);
        } else {
            element.classList.remove(animationClass);            
        }
        console.log('windowTop = ' + windowTop );
    })
}

animeScroll();

if (target.length) {
    window.addEventListener('scroll', debounce(        
        function(){
            animeScroll();
        }, 80)
    )
}


// animação - scroll suave
(function(){
    $('nav a').click(function(e){
        e.preventDefault();
        var id = $(this).attr('href'),
            targetOffset = $(id).offset().top,
            menuHight = $( 'nav').innerHeight();

        $('html, body').animate({
        scrollTop: targetOffset - menuHight
        }, 500);
    }); 
})();

style.css

/* Animação */
  [data-anime]{
    opacity: 0;
    transition: .4s;
  }

  [data-anime="left"]{
    transform: translate3d(-200px,0,0)
  }

  [data-anime="right"]{
    transform: translate3d(200px,0,0)
  }

  [data-anime="bottom"]{
    transform: translate3d(0,200px,0)
  } 

  [data-anime].animate{
    opacity: 1;
    transform: translate3d(0px,0px,0px);
  }

index.html

<h2 class="col-md-12" data-anime="bottom">Serviços</h2>            

Test the code in another simple project and it worked perfectly but when I use in my current study project some conflict that does not allow scroll reading

I'm using the bootstrap on site and lightbox for the image gallery when I use the scroll the "window.addEventListener" does not work but when the lightbox is active the "window.addEventListener" even works could anyone help me in how should I proceed?