Question

我有一个元素，我想在页面中稍微垂直居中。我想获得视口高度并从中减去页眉，页脚和主高度。结果数将除以3并应用于元素的margin-top。这种方法很好，除非窗口垂直收缩，正在应用负数。

function getMargin() {
        var wHeight = $(window).height();
        var hHeight = $('header').height();
        var mHeight = $('main').height();
        var fHeight = $('footer').height();
        var height_diff = (wHeight - hHeight - mHeight - fHeight) / 3 + "px";
        //here is where its not working
        if ($(height_diff) >= '30px') {
            $('#content').css('margin-top', height_diff);
        } else {
            $('#content').css('margin-top', '40px');
        };
        console.log(height_diff);
    }
    $(window).resize(function(){
        getMargin();
    });

只要返回的数字（height_diff）大于30px，就将其应用为保证金，如果小于30px则使用默认值。我错过了什么？

Answer 1

这对逻辑表达式有什么影响？

 if ($(height_diff) >= '30px')

它不会。左侧是存储数字的jquery元素，右侧是带数字和文本的字符串。

让我们解决明显问题并查看离开我们的地方

function getMargin() {
    var wHeight = $(window).height();
    var hHeight = $('header').height();
    var mHeight = $('main').height();
    var fHeight = $('footer').height();
    var height_diff = (wHeight - hHeight - mHeight - fHeight) / 3;
    //here is where its not working
    if (height_diff >= 30) {
        $('#content').css('margin-top', height_diff + "px");
    } else {
        $('#content').css('margin-top', '40px');
    };
    console.log(height_diff);
}
$(window).resize(function(){
    getMargin();
});

从我的角度来看会更好的东西

    var height_diff = Math.max(30,(wHeight - hHeight - mHeight - fHeight) / 3);
     $('#content').css('margin-top', height_diff + "px");

否如果需要其他逻辑，但这意味着要么使用height_diff num，要么如果height_diff小于30则结果为30而不是40。

Answer 2

你的问题是你正在对字符串进行数学比较。 >= '30px'没有逻辑意义。

更改

var height_diff = (wHeight - hHeight - mHeight - fHeight) / 3 + "px";

到

var height_diff = (wHeight - hHeight - mHeight - fHeight) / 3;

并更改

if ($(height_diff) >= '30px') {

到

if ($(height_diff) >= 30) {

然后您可以稍后添加“px”（尽管您实际上并不需要;如果省略单位后缀，jQuery的.css()会推断像素。

从函数中排除负数以获取和设置保证金

2 个答案: