CSS transitions and Javascript

[kamaboko]

Hello,

I’m using JS to have a text box come out from the right side when one scrolls down the page. I can’t seem to figure out the correct syntax though to have the background color of the text box fade in.

Help much appreciated.

http://codepen.io/kamaboko/pen/EVgQwJ

[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

[kamaboko]

Hi Mottie,

Thanks for your reply and code post. It made me think about this type of solution in a different way.

Cheers,
K

[Author]

Posts