Fade div content on window scroll - vanilla javascript

Fade div content on window scroll - vanilla javascript.markdown

Fade div content on window scroll - vanilla javascript

Just my shot at doing this without using jQuery

A Pen by GC on CodePen.

License.

index.html

<div id="target">
  <h1>Hi!</h1>
</div>

<div class="msg">
  <h1>Lorem ipsum</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos impedit dicta quos expedita, ab dolore nisi, et, deleniti natus fuga fugit tenetur aliquid ullam sunt modi quibusdam maxime consectetur autem?</p>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos impedit dicta quos expedita, ab dolore nisi, et, deleniti natus fuga fugit tenetur aliquid ullam sunt modi quibusdam maxime consectetur autem?</p>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos impedit dicta quos expedita, ab dolore nisi, et, deleniti natus fuga fugit tenetur aliquid ullam sunt modi quibusdam maxime consectetur autem?</p>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos impedit dicta quos expedita, ab dolore nisi, et, deleniti natus fuga fugit tenetur aliquid ullam sunt modi quibusdam maxime consectetur autem?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos impedit dicta quos expedita, ab dolore nisi, et, deleniti natus fuga fugit tenetur aliquid ullam sunt modi quibusdam maxime consectetur autem?</p>

  <h2>Bacon</h2>
  
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos impedit dicta quos expedita, ab dolore nisi, et, deleniti natus fuga fugit tenetur aliquid ullam sunt modi quibusdam maxime consectetur autem?</p>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos impedit dicta quos expedita, ab dolore nisi, et, deleniti natus fuga fugit tenetur aliquid ullam sunt modi quibusdam maxime consectetur autem?</p>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos impedit dicta quos expedita, ab dolore nisi, et, deleniti natus fuga fugit tenetur aliquid ullam sunt modi quibusdam maxime consectetur autem?</p>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos impedit dicta quos expedita, ab dolore nisi, et, deleniti natus fuga fugit tenetur aliquid ullam sunt modi quibusdam maxime consectetur autem?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos impedit dicta quos expedita, ab dolore nisi, et, deleniti natus fuga fugit tenetur aliquid ullam sunt modi quibusdam maxime consectetur autem?</p>

  
</div>

script.js

window.onscroll = function() {
  var target = document.getElementById("target");

  var height = window.innerHeight;

  var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;

  // Change this if you want it to fade faster
  height = height / 2;

  target.style.opacity = (height - scrollTop) / height;

};

style.css

* {
    box-sizing: border-box;

}
body {
  background-color: #F6F6F6;
  font-family: Helvetica, sans-serif;
}
#target {
  width: 100%;
  height: 250px;
  background-color: #A6ACEC;
  padding: 2em;
  text-align: center;
}

.msg {
  
  width: 60%;
  margin: auto;
}