在固定导航栏上方显示div并让它滚动离开

#fixed-div {
  position: fixed;
  top: 50px; /* 假设导航栏的高度为50px */
  width: 100%;
}

window.addEventListener('scroll', function() {
  var div = document.getElementById('fixed-div');
  var distance = div.offsetTop - window.pageYOffset;
  if (distance < 0) {
    div.classList.add('scroll-away');
  } else {
    div.classList.remove('scroll-away');
  }
});

.scroll-away {
  background-color: #f1f1f1;
  transition: background-color 0.5s ease;
}