6

我有下面的 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);

    });

您可以在这里看到它的实际效果。右边的灰色框写着“投票”

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

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

如果有人想弄乱本地副本，这里有一个带有 html 文件的 zip 文件（当我使用 webfonts 时，类型会消失）。

4

6 回答 6

1

你能不能只强制民意调查的位置相对，而不是使用媒体查询固定在指定的屏幕尺寸？

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

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

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

在此处输入图像描述

于 2013-05-30T15:08:32.977 回答
1

一个没有 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);
    }
});

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

于 2013-05-30T20:14:26.657 回答
0

大概是这样的：

$(window).resize(function(){
  if( $(this).width() <= 768 ) {
    $('foo').removeClass('bar') //whatever css class is doing the undesired effect at breakpoint
  } 
});
于 2013-05-30T15:12:44.593 回答
0

前段时间我遇到了同样的问题，这就是我解决它的方法：

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

/* 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.
    }
}

我不知道这是否优雅，这对我有用。

于 2013-05-30T05:26:57.927 回答
0

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() 函数将在调整窗口大小时适当地添加/删除您的固定类。

于 2013-05-30T15:33:03.600 回答
0

jQuery：禁用基于窗口宽度/媒体查询的脚本 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 来定位不同的屏幕尺寸。如果您在下面有任何问题或反馈，请告诉我。谢谢！

于 2018-09-13T09:03:18.930 回答