jQuery - 如果浏览器宽度超过 960 像素，则启动脚本答案

【问题标题】：jQuery - start script if browser width is more than 960 pxjQuery - 如果浏览器宽度超过 960 像素，则启动脚本
【发布时间】：2013-11-28 13:01:33
【问题描述】：

我正在使用这个脚本，以便在滚动时会出现某些 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 时启动此脚本，以使其无法在移动设备上运行。

谢谢。

【问题讨论】：

标签： jquery responsive-design screen-size

【解决方案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);
                }
            }); 
        }
    });
});

【讨论】：

【解决方案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);
                }
            });
        } 
    });
});

【讨论】：