Question

我有下面的jQuery脚本触发div变为浮动修复。（哪个有效，我没有问题）。

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

    });

您可以在行动here中看到它。这是右边的灰色框，上面写着“民意调查”

我的网站具有响应性，因此当它低于768像素时，poll div会在博客内容下移动。因此，在完整的浏览器宽度下，脚本运行良好，但是当我调整大小时，轮询div会变得混乱。

关于jQuery我是完全的noob - 我是一个出色的复制贴 - 但我想象现有的脚本中有一种奇特的方式来指示它在匹配媒体查询时禁用它浏览器宽度，这样我就可以摆脱fixed-floating-div功能。

如果有人想要使用本地副本，here is a zip file使用html文件（类型将在我使用webfonts时查看）。

Answer 1

您是否可以仅使用媒体查询强制轮询的位置，而不是固定在指定的屏幕尺寸？

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

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

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

enter image description here

Answer 2

没有Stack Overflow帐户的家伙看到了我的问题并通过电子邮件提供了答案。这是一个欺骗性的简单解决方案。只需添加到现有代码：

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

最后一段代码如下所示：

$(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);
    }
});

我测试了这里提供的所有其他答案，但没有一个以正确的方式工作。非常感谢你的帮助。

Answer 3

前一段时间我遇到了同样的问题，而我解决了这个问题：

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

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

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

然后在我的.js文件中，我创建了一个这样的函数：

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

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

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

我不知道这是否优雅，这个为我工作。

Answer 4

可能类似于：

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

Answer 5

matchMedia可能正是您所需要的：http://hacks.mozilla.org/2012/06/using-window-matchmedia-to-do-media-queries-in-javascript/

在滚动功能之外添加这样的内容：

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（）函数将适当地添加/删除固定类。

Answer 6

jQuery：禁用基于窗口宽度/媒体查询Jquery的脚本，仅用于移动视图

添加Java语言

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

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

结局

是的，我们已经完成了！现在，您可以执行JavaScript以定位不同的屏幕尺寸。如果您有任何疑问或反馈，请告诉我。谢谢！

jQuery：根据窗口宽度/媒体查询禁用脚本

6 个答案: