Home › Forums › JavaScript › CSS transitions and Javascript › Reply To: CSS transitions and Javascript
September 24, 2015 at 6:22 pm
#208669
Member
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.