jQuery Visible on Screen

This is a great piece of code that allows you to run a script when an element is physically visible on the screen. The ‘on-screen’ is very important here as most jQuery scripts of this nature will run if the item is present and that could be if it’s not visible in the viewport, or even hidden as display: none. This script explicitly runs when an element is physically shown/appears/comes into view on the screen and also includes elements that may be triggered by other phased events and this make sit particularly useful for interactions.

jQuery Run Script when element is Visible OnScreen

$.fn.isOnScreen = function(){
 
    var win = $(window);
    
    var viewport = {
        top : win.scrollTop(),
        left : win.scrollLeft()
    };
    viewport.right = viewport.left + win.width();
    viewport.bottom = viewport.top + win.height();
    
    var bounds = this.offset();
    bounds.right = bounds.left + this.outerWidth();
    bounds.bottom = bounds.top + this.outerHeight();
    
    return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
    
};

Example Usage with client link

We used this code on a client’s photography website to dynamically switch the body class derived from photography of different tonalities – light & dark. The aim was to dynamically change the colour of the logo depending on whether a slide was dark and therefore needed a light version of the logo, or light and therefore needed a light version of the logo. It works seamlessly and you can view it in action on Robert Shack Photography website.


$(document).ready(function(){

// light slides
$("#slide-1, #slide-2, #slide-5, #slide-6, #slide-7, #slide-11").addClass('light-slide');
// dark slides
$("#slide-3, #slide-4, #slide-8, #slide-9, #slide-10").addClass('dark-slide');

$(".w-slider-mask > .dark-slide").on("transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd",
function() {
if ($(this).isOnScreen()) {
// The element is visible, do something
$('body').addClass('light-theme');
$('body').removeClass('dark-theme');
}
});
$(".w-slider-mask > .light-slide").on("transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd",
function() {
if ($(this).isOnScreen()) {
// The element is visible, do something
$('body').addClass('dark-theme')
$('body').removeClass('light-theme');
}
});

NB the ‘transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd‘ is very important in this application as the class should not change until the slider CSS transition has completed and that’s another useful bit of jQuery code.

About the Author
jQuery Visible on Screen jQuery Visible on Screen 0da77002febbfe28d15144a57bbcc2c9 s 180 d mm r g

Glenn

A highly experienced Web Designer / Web Developer (Webflow, WordPress, Weebly & Custom), Front-end / Back-end Developer & New Media Specialist, with extensive knowledge of a wide spectrum of technologies in the Development and Creative Industries, built up over a number of years.