jQuery - запустить скрипт, если ширина браузера превышает 960 пикселей

Question

Я использовал этот сценарий, чтобы при прокрутке отображались определенные DIV, но при использовании мобильного устройства он работает не так хорошо. Например, при использовании iPad DIV не будут отображаться, если я не уберу палец с экрана или пока страница не перестанет прокручиваться.

Вот что у меня есть:

$(document).ready(function()
{
    $(window).scroll( function(){
        $('.hidden').each( function(i){
            var bottom_of_object = $(this).position().top + $(this).outerHeight() / 4;
            var bottom_of_window = $(window).scrollTop() + $(window).height();
            if( bottom_of_window > bottom_of_object ){
                $(this).animate({'opacity':'1'},500);
            }
        }); 
    });
});

Теперь я просто хочу, чтобы этот скрипт запускался, если окно браузера больше 960, чтобы оно не работало на мобильных устройствах.

Спасибо.

Answer 1

Использовать .width() функция, чтобы получить ширину браузера, и выполнять код, только если он превышает 960:

$(document).ready(function() {
    $(window).scroll(function() {
        if($(window).width() > 960) {
            $('.hidden').each( function(i){
                var bottom_of_object = $(this).position().top + $(this).outerHeight() / 4;
                var bottom_of_window = $(window).scrollTop() + $(window).height();
                if( bottom_of_window > bottom_of_object ){
                    $(this).animate({'opacity':'1'},500);
                }
            }); 
        }
    });
});

Answer 2

Вы можете просто обернуть функцию в проверку ширины окна if($(window).width() >= 960)

$(document).ready(function()
{
    if ($(window).width() >= 960) {
        $(window).scroll( function(){
            $('.hidden').each( function(i){
                var bottom_of_object = $(this).position().top + $(this).outerHeight() / 4;
                var bottom_of_window = $(window).scrollTop() + $(window).height();
                if( bottom_of_window > bottom_of_object ){
                    $(this).animate({'opacity':'1'},500);
                }
            });
        } 
    });
});