jQuery：基于窗口宽度/媒体查询禁用脚本

我有下面的jQuery脚本，它触发一个div变为浮动固定。（这是工作，我没有问题）

你可以在行动中看到它。右边的灰色方框写着“投票”

我的网站是有响应的，所以当它低于768像素时，投票div在博客内容下向下移动。因此，在全浏览器宽度下，脚本工作得很好，但当我调整它的大小时，poll div就会失控

说到jQuery，我完全是个傻瓜——我是一个优秀的复制粘贴者——但我想象着现有脚本中有一种奇特的方式，当它与媒体查询或浏览器宽度匹配时，指示它禁用它，这样我就可以摆脱固定浮动div功能

---

如果有人想让本地副本弄乱，请使用html文件（我使用webfonts时，键入的内容看起来会有问题）。

我以前也遇到过同样的问题，我就是这样解决的：

设置媒体查询以在需要时隐藏元素：

/* Somewhere above... */
div#toHide { display: block; /* ... */ }

@media (min-width: 800) {
    div#toHide { display: none; }
}

然后在我的.js文件中，我创建了如下函数：

function isDivVisible() {
    return $('div#toHide').is(':visible');
}

$(document).ready(function() {
    ctop = $('#comment').offset().top - parseFloat($('#comment').css('margin-top').replace(/auto/, 0));
});
$(window).scroll(function (event) {

    if ($(window).width() > 768) {

        // what the y position of the scroll is
        var y = $(this).scrollTop();
        var abottom = $('#individual_second_tier').offset().top - parseFloat($('#individual_second_tier').css('margin-top').replace(/auto/, 0));

        // whether that's below the form
        if (y >= ctop) {
            // if so, ad the fixed class
            $('#comment').addClass('fixed');
            if (y > abottom-$('#comment').height()){
                $('#comment').offset({'top': abottom-$('#comment').height()-y});
            }
            else
            {
                $('#comment').offset({'top': 0 });
            }
        } else {
            // otherwise remove it
            $('#comment').removeClass('fixed');
        }
        var newWidth = $('#comment').parent().width();
        $('#comment').width(newWidth);
    }
});

现在，在我的方法上，如果用户看不到它，我不想执行它的所有代码：

function someHugeFunction() {
    if(isDivVisible()) {
        // some crazy stuff here.
    }
}

---

我不知道这是否优雅，这对我来说很有效。

你能不能不强制投票的位置为相对，而不是使用媒体查询将其固定在指定的屏幕大小

@media (min-width: 768) {
    #comment { 
        position: relative !important; 
        top: 0 !important; 
    }
}

或者，可以在函数中使用jQuery

if ($(window).width() > 768) { 
    $('#comment').removeClass('fixed');
}

---

可能类似于：

$(window).resize(function(){
  if( $(this).width() <= 768 ) {
    $('foo').removeClass('bar') //whatever css class is doing the undesired effect at breakpoint
  } 
});

$（窗口）。调整大小（函数（）{
如果（$（this）.width（）matchMedia可能是您要查找的内容：

在滚动功能外添加如下内容：

var isWide,
    width768Check = window.matchMedia("(min-width: 768px)");

width768Check.addListener(setWidthValue);
function setWidthValue (mediaQueryList) {
    isWide = width768Check.matches;
}
isWide = width768Check.matches;

$(window).resize(function(){
    if (isWide) {
        $('#comment').addClass('fixed');
    } else {
        $('#comment').removeClass('fixed');
    }
});

然后在你的卷轴上

if (y >= ctop && isWide) {
...
}

虽然不完美，但确实有效。在调整窗口大小时，resize（）函数将适当地添加/删除您的固定类。
一个没有堆栈溢出帐户的家伙看到了我的问题，并通过电子邮件提供了答案。这是一个非常简单的解决方案。只需添加到现有代码中：

if ($(window).width() > 768) {

最后一段代码如下所示：

function isDivVisible() {
    return $('div#toHide').is(':visible');
}

$(document).ready(function() {
    ctop = $('#comment').offset().top - parseFloat($('#comment').css('margin-top').replace(/auto/, 0));
});
$(window).scroll(function (event) {

    if ($(window).width() > 768) {

        // what the y position of the scroll is
        var y = $(this).scrollTop();
        var abottom = $('#individual_second_tier').offset().top - parseFloat($('#individual_second_tier').css('margin-top').replace(/auto/, 0));

        // whether that's below the form
        if (y >= ctop) {
            // if so, ad the fixed class
            $('#comment').addClass('fixed');
            if (y > abottom-$('#comment').height()){
                $('#comment').offset({'top': abottom-$('#comment').height()-y});
            }
            else
            {
                $('#comment').offset({'top': 0 });
            }
        } else {
            // otherwise remove it
            $('#comment').removeClass('fixed');
        }
        var newWidth = $('#comment').parent().width();
        $('#comment').width(newWidth);
    }
});

我测试了这里提供的所有其他答案，但没有一个是正确的。非常感谢您的帮助。
jQuery：禁用基于窗口宽度的脚本/media query jQuery仅用于移动视图

添加Javascript

添加jQuery后，您可以在自定义javascript文件中使用以下代码。您可以根据目标设备的分辨率将“739”更改为不同的数字

if ( $(window).width() > 739) {      
  //Add your javascript for large screens here 
} 
else {
  //Add your javascript for small screens here 
}

结束

是的，我们已经完成了！您现在可以执行javascript以针对不同的屏幕大小。如果您有任何问题或反馈，请在下面告诉我。谢谢！
我想搞乱您的zip，但是……ftp上需要身份验证。@Esteban啊，很抱歉。忘记将路径更改为http://而不是ftp://-链接更新d。如果我正确理解了上面的答案……它完全隐藏了DIV。我仍然想显示DIV，但禁用了脚本。@Armin：你可以很容易地更改它，老实说，正如我所说，我在遇到相同问题时对此进行了研究。但我无法找到在没有javascript的情况下如何操作。如果你想更改此行为，可以肯定的是，您希望这样做以避免隐藏div，而只是停止脚本的循环吗？不要忘记将此标记为已接受的答案其他人可能与您有相同的问题，最终将查找具有已接受答案的问题。是的，确实如此。因为我回答了自己的问题，系统不允许我将其检查为已回答直到24小时后。