title: Background color change on scroll
body: <p>I wanna change the background color on a scroll, but I think that problem is I'm using Bootstrap. Can you help me? Any solutions? I'm almost sure it doesn't work because of Bootstrap. I can't type in data-color !important or in JavaScript. What can I do to overwrite the Bootstrap class?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const sections = document.querySelectorAll('.bg');
  
  function changeBackground(){
      const bottom= window.scrollY + window.innerHeight;
  
      sections.forEach(section =&gt; {
          sectionMiddle= section.offsetTop + (section.offsetHeight / 2);
  
          if(bottom &gt;sectionMiddle){
              document.body.style.backgroundColor = section.dataset.color;
          }
      });
  }
  window.addEventListener('scroll', changeBackground);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*{
      margin:0;
      padding:0;
      box-sizing: border-box;
  }
  body{
      background-color: #9bc3f6;
      transition: background .8s;
  }
  
  .section1, .section2{
    height:100vh;
    width:100%;
   }
   </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-   alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-CuOF+2SnTUfTwSZjCXf01h7uYhfOBuxIhGKPbfEJ3+FqH/s6cIFN9bGr1HmAg4fQ" crossorigin="anonymous"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class="container-fluid section1 bg" data-color="yellow"&gt;
      &lt;h1&gt;Hello World&lt;/h1&gt;
    &lt;/div&gt;
    
      &lt;div class="container-fluid text-center section2 bg" data-color="blue"&gt;
      &lt;h1&gt;Hello World 2&lt;/h1&gt;
    &lt;/div&gt;
    
        &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" 
      integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha3/dist/js/bootstrap.bundle.min.js" 
      integrity="sha384-popRpmFF9JQgExhfw5tZT4I9/CI5e2QcuUZPOVXb1m7qUmeR2b50u+YFEYe1wgzy" crossorigin="anonymous"&gt;&lt;/script&gt;
   
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>