title: JS-Changing the background image by scrolling
body: <p><strong>My Files:</strong></p>
  <p><a href="https://jsfiddle.net/claudiopb/f8y4mnc6/2/" rel="nofollow noreferrer">https://jsfiddle.net/claudiopb/f8y4mnc6/2/</a></p>
  <p>I have 2 background images. When the scroll invades the Y coordinate at the top of div 4, I would like to change the body's fullscreen image to the other background image.</p>
  <p>As you can see in these examples below:<a href="https://i.stack.imgur.com/SjOzS.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SjOzS.jpg" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/F0Trw.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/F0Trw.jpg" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/fPA05.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fPA05.jpg" alt="enter image description here" /></a></p>
  <p>I started to make a JavaScript to intercept if the scroll coordinate was equal to the top of the div, to do the CSS class change, but it is not working.</p>
  <p><strong>HTML</strong></p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;pt-BR&quot;&gt;
  
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;css/styles.css&quot;&gt;
      &lt;script src=&quot;js/script.js&quot; defer&gt;&lt;/script&gt;
      &lt;title&gt;Background changing&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body class=&quot;bg-1&quot;&gt;   
      &lt;div class=&quot;style-1 item-1&quot;&gt;
          &lt;h1&gt;Item-1&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div class=&quot;style-1 item-2&quot;&gt;
          &lt;h1&gt;Item-2&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div class=&quot;style-1 item-3&quot;&gt;
          &lt;h1&gt;Item-3&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div  class=&quot;style-1 item-4&quot;&gt;
          &lt;h1&gt;Item-4&lt;/h1&gt;
          &lt;p&gt;Here I want the background image changing!!!&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class=&quot;style-1 item-5&quot;&gt;
          &lt;h1&gt;Item-5&lt;/h1&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  <p><strong>CSS</strong></p>
  <pre><code> * {
     border: 0;
     padding: 0;
     margin: 0;
     box-sizing: border-box;
   }
  
   html {
     scroll-behavior: smooth;
   } 
  
   body {
    position:relative;
   }
  
   .bg-1 {
    background:url('https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171__480.jpg') no-repeat fixed center bottom;
    background-size: cover; 
  }
  
   .bg-2 {
     background: url('https://images.unsplash.com/photo-1434725039720-aaad6dd32dfe?ixlib=rb-1.2.1&amp;w=1080&amp;fit=max&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb') no-repeat fixed center top;
     background-size: cover;
   }
  
   .style-1 {
    height:800px;
    width:600px;
    display:flex;
    justify-content: center; 
    align-items: center;
    flex-direction: column;
    font-size: 30px;
    text-align: center;  
    padding-left: 20px;
    padding-right: 20px;
   }
  
   .style-1 h1 {
    padding-bottom:40px;
   } 
  
   .item-1 {
    background-color:green
   }
  
   .item-2 {
    background-color:blue
   }
  
   .item-3 {
    background-color:grey
   }
  
   .item-4 {
    background-color:orange
   }
  
   .item-5 {
    background-color:red
   }
  </code></pre>
  <p><strong>JS</strong></p>
  <pre><code>const el = document.querySelector(&quot;.item-4&quot;)
  const result = getOffset(el)
  let scroll = null;
  
  function getOffset(el) {
      const rect = el.getBoundingClientRect(); 
      return rect.top 
  }
  
  
  window.addEventListener(&quot;scroll&quot;, (event) =&gt; {
      scroll = this.scrollY;
      console.log(scroll)
  
      if (scroll == result) {
          console.log('true')
          /**
           * if this returns true, write the lines of code to switch the body's class. 
           * 
           */
      } 
  });
   
  
   
  
   
  </code></pre>