<div class="wrapper">
 white is save zone
  <div class="black-box"> 
  i`m fixed
  </div>
</div>

<div class="red-box">
  red line
</div>

<div class="save-zone">
  white is save zone
</div>

.wrapper {
  height: 600px;
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  font-weight: 700;
}

.black-box {
  position: fixed;
  top: 0;
  right: 0;
  margin: 25px;
  width: 100px;
  height: 100px;
  color: white;
  line-height: 100px;
  text-align: center;
  background-color: black;
  text-transform: uppercase;
  font-weight: 700;

}

.red-box {
  text-transform: uppercase;
  font-weight: 700;
  width: 100%;
  height: 100px;
  line-height: 100px;
  background-color: red;
  text-align: center;
}

.save-zone {
  height: 800px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  font-weight: 700;
}

const red = document.querySelector('.red-box'),
      black = document.querySelector('.black-box');
let a = red.offsetTop,
    b = document.documentElement.clientHeight,
    scroll = window.pageYOffset;

window.addEventListener('scroll', () => {
  scroll = window.pageYOffset;
  if ((scroll + b) > a) {
    black.style.display = 'none';
    
    if(scroll > a + red.offsetHeight) {
      black.style.display = 'block';
    }
  } else {
    black.style.display = 'block'
  }
});