section hover header playground

by levchenko_d

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit-icons.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/uikit.min.css">
<div class="header">
  Header
</div>

<div id="section" class="section light"></div>
<div class="section dark"></div>
<div class="section light"></div>
<div class="section dark"></div>
<div class="section light"></div>

SCSS

.header {
  position: sticky;
  height: 50px;
  padding: 10px;
  top: 0;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  transition: background-color 0.25s ease-out;
  
  &.dark {
     background: rgba(0, 0, 0, 0.8);
  }
}

.section {
  height: 100vh;
  width: 100%;
  /* visibility: visible !important; */
  
  &.dark {
    background: #000;
  }
}

JavaScript

var throttle = (fn, wait) => {
    var time = Date.now();

    return function () {
        if (time + wait - Date.now() < 0) {  
            fn();
            time = Date.now();
        }
    };
};

var header = $('.header')[0];
var sections = document.querySelectorAll('.section');


function handleHeaderAppearance(section){
	var appearanceCls = 'dark'
	var isDark = section.classList.contains( appearanceCls);
  
  if(isDark){
  	header.classList.add(appearanceCls);
  } else {
  	header.classList.remove(appearanceCls);
  }
}

function checkOverlap(element1, element2){
	var rect1 = element1.getBoundingClientRect();
  var rect2 = element2.getBoundingClientRect();
	var overlap = !(rect1.right < rect2.left || 
                rect1.left > rect2.right || 
                rect1.bottom < rect2.top || 
                rect1.top > rect2.bottom);
  return overlap;
}

function handleScroll(){
	for(var i = sections.length-1; i>-1; i--){
    var section = sections[i];
    var overlap = checkOverlap(header, section);

		if(overlap){
	    handleHeaderAppearance(section);
    	break;
    }
  }
}

$(document).on('scroll', throttle(handleScroll, 50))