fixeddiv和滚动期间淡入opacity的示例：

var turn = document.getElementById('turn');
updateOpacity(turn, 0);

window.addEventListener('scroll', function(e) {
  var limit = document.body.scrollHeight - window.innerHeight;
  var scroll = window.pageYOffset ||
    document.documentElement.scrollTop ||
    document.body.scrollTop || 0;
  updateOpacity(turn, scroll / limit);
  randomFontColor(turn); // optional
});

function updateOpacity(element, opacity) {
  element.style.opacity = opacity;
}

function randomFontColor(element) {
  var randColor = Math.floor(Math.random() * 9999).toString();
  var hexColor = "#" + randColor.padStart(6, 'FF');
  element.style.color = hexColor;
}

body {
  height: 2600px;
}

#turn {
  left: 6%;
  width: 88%;
  position: fixed;
}

.highlight {
  color: yellow;
  line-height: 42px;
  background: black;
  font-weight: bold;
  text-align: center;
}

<div id="turn" class="highlight">
  Fixed top div with Fade in Effect on Scroll
</div>