Only run WayPoints if viewport width is greater than 1000px?

Question

Is there a way to only run WayPoints when the viewport is greater than a certain width? Preferably checking if that width changes on resize?

Normally I'd just leave this but I have 4 sections and when they come into view I add a class of .in-view to them so I can animate the divs within. The problem is (I think) that on mobile my sections display in a slideshow (Slick slider) so I have the same animation/transition styling on .slick-current and sometimes they don't work, which is likely because it's setting the elements to .in-view still?

This is the code I'm using:

$(document).ready(function(){
    var waypoints = document.querySelectorAll('.showcase__item');
    for (var i = waypoints.length - 1; i >= 0; i--) {
        var waypoint = new Waypoint({
            element: waypoints[i],
            handler: function(direction) {
                this.element.classList.toggle('in-view');
            },
            offset: '60%',
        });
    }
});

Is this possible ...is it even a good idea? Not sure how stressful this would be on performance?

Answer 1

I don't know really this plugin but it would be possible using window.matchMedia().addListener() method, it would be better than binding to window resize event. Then you could enabling/disabling waypoint plugin. By the way, you should initialize plugin using jQuery's way.

The following code hasn't been tested:

var widthMatch = window.matchMedia("(min-width:1000px)");
var waypoints;

widthMatch.addListener(function(e) {
  switchWayPoints(e.matches);
});

function switchWayPoints(enable) {
  waypoints[enable ? "enableAll" : "disableAll"]();
}

$(document).ready(function() {
  waypoints = $('.showcase__item').waypoint(function(direction) {
    // -> Seem strange to call it here without any direction check?! ->$(this).toggleClass('in-view');
  }, {
    offset: '60%'
  });

  switchWayPoints(widthMatch.matches);
});

Answer 2

You can check the $(window).resize() and $(window).width(); . $(window).resize() event is sent to the window element when the size of the browser window changes and $(window).width(); gets the current width of the window. Here is the snippet of the code.

$(document).ready(function(){
    $(window).resize(function () {
        width=$(window).width();
        if (width > 1000){
            var waypoints = document.querySelectorAll('.showcase__item');
            for (var i = waypoints.length - 1; i >= 0; i--) {
                var waypoint = new Waypoint({
                    element: waypoints[i],
                    handler: function(direction) {
                        this.element.classList.toggle('in-view');
                    },
                    offset: '60%',
                });
            }
        } else {
            // Your logic when the screen size is less then 1000 px.
            if ($("#someID").hasClass("classname")) {
                $("#someID").removeClass("classname"); 
            }
        }
    });
});