scroll

If in view

Check if an element is in view using only JQuery.
A sort of poor man’s Waypoints.

Demo with sections.

$(window).on('load scroll', function() {
  $('.element').each(function() {
    if ( $(this).offset().top <= ($(window).scrollTop() + $(window).height()/2)) {
     // in view (in the upper half of the screen)
    } else {
     // not in view
    }
  });
});

Using fullPage.js to make a vertical split-screen parallax

fullPage.js, as its author states, is a jQuery plugin which allows you to “create full screen pages fast and simple”.

How about using it to make a split-screen parallax fast and simple ?

First the required HTML structure:

<div id="splitscreen">
<div class="section">
<div class="column column-left">Left Side</div>
<div class="column column-right">Right Side</div>
</div>
</div>

Then init the fullPage.js, and customize the settings to your taste.

$(document).ready(function() {
$('#splitscreen').fullpage({
navigation: false,
scrollingSpeed: 1000,
});
});

Now the CSS for the split-screen:

#splitscreen > .section .column-left {
float: left;
width: 50%;
color: #000;
background: #fff;
}

#splitscreen > .section .column-right {
float: right;
width: 50%;
color: #fff;
background: #000;
}

#splitscreen > .section .column-left {
transition: all 1s ease 0s;
transform: translateY(100%);
backface-visibility: hidden;
}

#splitscreen > .section .column-right {
transition: all 1s ease 0s;
transform: translateY(-100%);
backface-visibility: hidden;
}

#splitscreen > .section.active {
z-index: 1;
}

#splitscreen > .section.active .column-left {
transform: translateY(0);
}

#splitscreen > .section.active .column-right {
transform: translateY(0);
}

#splitscreen > .section.active ~ .section .column-left {
transform: translateY(-100%);
}

#splitscreen > .section.active ~ .section .column-right {
transform: translateY(100%);
}

/* prevent fullpage from translating the page */
#splitscreen {
transform: translate3d(0px, 0px, 0px) !important;
}

#splitscreen > .section {
position: absolute;
top: 0;
left: 0;
}

Split screen parallax demo.

Check if page scroll is at bottom

May seem odd to check if the page scroll is at bottom, but can be useful if you need to hide something or show something else, as in a back to top button for example.

$('#back-to-top').hide();
$(window).scroll(function(){
    if ( document.body.scrollHeight - $(this).scrollTop()  <= $(this).height() ){
        $('#back-to-top').show();
    } else {
        $('#back-to-top').hide();
    }
});