Change BG of Header On Scroll

window.onscroll = function() {
2
    var header = document.getElementById('header-1');
3
    if (window.pageYOffset > 100) {
4
        header.style.backgroundColor = '#015478';
5
    } else {
6
        header.style.backgroundColor = 'transparent';
7
    }
8
}
9

/* REMOVE UNDERLINE FROM LINKS IN HEADER */
header a {
background-image: none !important;
}
/* ---- END ---- */

<!-- jQuery -->
<script src="//code.jquery.com/jquery-latest.js"></script>
<!-- Popper -->
<script src="https://unpkg.com/@popperjs/core@2"></script>
<!-- Tippy -->
<script src="https://unpkg.com/tippy.js@6"></script>

<script language="javascript">
// This code will execute as soon as the document is loaded 
$(document).ready(function() {
    // Allow or disallow html in tooltips (default = false)
    tippy.setDefaultProps({allowHTML: true}); 
    // Transform elements
    let tooltip_elements = $('a[href^="#tooltip_"]');
    tooltip_elements.each(function(i){
        let link = $(this).attr('href');
        let tip = link.replace('#tooltip_', '');
        $(this).attr('data-tippy-content', tip);
        if (link.startsWith('#tooltip_')) {
          $(this).removeAttr('href').css('cursor', 'pointer');
        }
    });
    // Finally, call `tippy`
    tippy('[data-tippy-content]');
});</script>

/* ----------------------------------------
Note: any modifications to these styles will be global 
---------------------------------------- */
.tippy-box {}
.tippy-content {}
.tippy-arrow {}

/* ----------------------------------------
You can also apply tooltip css overrides on the INTERIOR of your tooltips. Note: results may sometimes be unpredictable 😡
---------------------------------------- */
.tippy-box .style1 {
  font-family: courier;
  color: #0066FF;
  padding: 15px;
  display: inline-block;
}

/*CSS*/
#nav__wrapper {
  transform: translateY(0%);
  transition: all 0.3s ease-out;
}

#nav__wrapper.header_hide {
  transform: translateY(-100%);
}
/*CSS*/
  
/*JS*/
const header_el = $("#nav__wrapper"),
    mywindow = $(window);
let mypos = mywindow.scrollTop(),
    up = !1,
    newscroll = 0;
mywindow.scroll(function () {
    (newscroll = mywindow.scrollTop()) > mypos && !up ? (header_el.toggleClass("header_hide"), (up = !up)) : newscroll < mypos && up && (header_el.toggleClass("header_hide"), (up = !up)), (mypos = newscroll);
});
/*JS*/

h1 {
  background: linear-gradient(180deg, rgba(255,255,255,0) 65%, #FFD0AE 65%);
  display: inline; font-weight: normal;
}

/**
 * Plugin Name:       My Basics Plugin
 * Plugin URI:        https://example.com/plugins/the-basics/
 * Description:       Handle the basics with this plugin.
 * Version:           1.10.3
 * Requires at least: 5.2
 * Requires PHP:      7.2
 * Author:            John Smith
 * Author URI:        https://author.example.com/
 * License:           GPL v2 or later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 * Update URI:        https://example.com/my-plugin/
 * Text Domain:       my-basics-plugin
 * Domain Path:       /languages
 */

.sqs-announcement-bar {

  overflow: hidden;

}

.sqs-announcement-bar-text {

  -moz-transform: translateX(100%);

  -webkit-transform: translateX(100%);

  transform: translateX(100%);

  -moz-animation: scroll 15s linear infinite;

  -webkit-animation: scroll 15s linear infinite;

  animation: scroll 15s linear infinite;

}

@-moz-keyframes scroll {

  from { -moz-transform: translateX(100%); }

  to { -moz-transform: translateX(-100%); }

}

@-webkit-keyframes scroll {

  from { -webkit-transform: translateX(100%); }

  to { -webkit-transform: translateX(-100%); }

}

@keyframes scroll {

  from {

    -moz-transform: translateX(100%);

    -webkit-transform: translateX(100%);

    transform: translateX(100%);

  }

  to {

    -moz-transform: translateX(-100%);

    -webkit-transform: translateX(-100%);

    transform: translateX(-100%);

  }

}

.sqs-announcement-bar-close {display:none}

.sqs-announcement-bar-text a {
    text-decoration: none !important;
}

const images = document.querySelectorAll('.slide-in');

// debounce function for scrolling
function debounce(func, wait = 20, immediate = true) {
  var timeout;
  return function() {
    var context = this, args = arguments;
    var later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
};


function checkSlide(e){
  images.forEach((image) => {
    const slideInAt = (window.scrollY + window.innerHeight) - image.height / 2;
    console.log(slideInAt)
  })
}



window.addEventListener('scroll', debounce(checkSlide))

function elementInViewport(myElement) {
  const myElementHeight = myElement.offsetHeight;
  const myElementWidth = myElement.offsetWidth;

  const bounding = myElement.getBoundingClientRect();

  if (
    bounding.top >= -myElementHeight &&
    bounding.left >= -myElementWidth &&
    bounding.right <=
      (window.innerWidth || document.documentElement.clientWidth) +
        myElementWidth &&
    bounding.bottom <=
      (window.innerHeight || document.documentElement.clientHeight) +
        myElementHeight
  ) {
    return true;
  } else {
    return false;
  }
}