Reply To: CSS transitions and Javascript

[Mottie]

Paulie, that demo makes the popout start and stop continuously while scrolling down. I ended up modifying the code a bit:

var setPoint = .7, // .7 = 70% scroll height
    isVisible = false,
    win = document.getElementById('popOut'),
    height = document.body.scrollHeight - window.innerHeight;

function scroller() {
  var loc = document.body.scrollTop / height;
  if ( loc >= setPoint && !isVisible ) {
    win.classList.add( 'showing' );
    isVisible = true;
  } else if ( loc < setPoint && isVisible) {
    win.classList.remove( 'showing' );
    isVisible = false;
  }
}

window.onscroll = scroller;

With the changes above, you can set a percentage height of total where the popout becomes visible instead of picking an arbitrary value.

http://codepen.io/Mottie/pen/xwEMYo