BACK TO TOP WITH COLOUR CHANGE

by davidxmartins

HTML

<div class="white"></div>
<div class="green dark-section"></div>
<div class="grey"></div>
<div class="black dark-section"></div>
<div class="white"></div>
<div class=" blue dark-section"></div>
<div class="white"></div>
<div class="red dark-section"></div>


<a href="#back-to-top">
  <div class="backtotop__arrow">
    <div class="backtotop__line colour-change line-vertical"></div>
    <div class="backtotop__line colour-change line-45deg-left"></div>
    <div class="backtotop__line colour-change line-45deg-right"></div>
  </div>
</a>

CSS

body {
      margin: 0;
    }
    
/*  OBJECTS */

/* ARROW */

.backtotop__arrow {
    height: 120px; /* Adjusted from 80px to 100px */
    width: 40px;
    border-radius: 10px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 20px;
    right: 20px;

    
}

.backtotop__line {
    background: green;
    position: absolute;
}

.line-vertical {
    height: 40px; /* Reduced from 50px to 40px */
    width: 2px;
    bottom: 15px;
    transition: height 0.4s ease-in-out;
}

.line-45deg-left, .line-45deg-right {
    height: 20px;
    width: 2px;
    bottom: 55px; /* Adjusted from 65px to 55px */
    transition: transform 0.4s ease-in-out;
    transform-origin: bottom center;
}

.line-45deg-left {
    transform: rotate(135deg); 
}

.line-45deg-right {
    transform: rotate(-135deg); 
}

.backtotop__arrow:hover .line-vertical {
    height: 100px; /* Expanded from 70px to 100px */
}

.backtotop__arrow:hover .line-45deg-left {
    transform: translateY(-60px) rotate(135deg); /* translateY Value changed */
}

.backtotop__arrow:hover .line-45deg-right {
    transform: translateY(-60px) rotate(-135deg); /* translateY Value changed */
}














    /*  SECTIONS */

    .white {
      height: 100vh;
      background-color: #fff;/
    }

    .green {
      height: 100vh;
      background-color: green;/
    }

    .grey {
      height: 100vh;
      background-color: #ccc;/
    }

    .blue {
      height: 100vh;
      background-color: blue;/
    }

    .black {
      height: 100vh;
      background-color: #000;/
    }

    .red {
      height: 100vh;
      background-color: red;/
    }

JavaScript

//Get all the dark section elements
const darkSections = document.querySelectorAll('.dark-section');
// Get the fixed elements 
const fixedElements = document.querySelectorAll('.colour-change');

let handleScroll = () => {
    fixedElements.forEach(fixedElement => {
        fixedElement.style.backgroundColor = 'green';   // set default color to green
        darkSections.forEach((section) => {
            const darkSectionRect = section.getBoundingClientRect();
            const fixedElemRect = fixedElement.getBoundingClientRect();
            // condition to check the intersection
            if (darkSectionRect.top < fixedElemRect.bottom && darkSectionRect.bottom > fixedElemRect.top) {
                fixedElement.style.backgroundColor = 'white'; // Change color to white if intersect
            }
        });
    })
};

window.addEventListener('scroll', handleScroll);