Question

这是我的javascript代码：

height = jQuery(window).height(); 
if (height < 700) { 
    jQuery(".page-title").css("margin-top", "100px");     
} else if (height >= 700 && height < 800 ) {
    jQuery(".page-title").css("margin-top", "160px");
}else{
    jQuery(".page-title").css("margin-top", "220px");
}

这是html部分

<h1 class="page-title">My Header</h1>

我想要实现的是以某种方式按比例显示该保证金。例如：我如何知道window.height = 890这将是我的类页面标题的margin-top值？解决这个问题的诀窍是什么？谢谢。

Answer 1

您的班级名称为page-title，而不是.page-title。因此，您必须将HTML代码更改为：

<h1 class="page-title">My Header</h1>

点只是类的标识符。

修改修正后，您的代码运行良好。页面加载后代码只执行一次。我想你想在每次窗口大小改变时调整它。所以我创建了一个函数：

function fixMargin() { height = jQuery(window).height(); if (height < 700) { jQuery(".page-title").css("margin-top", "100px"); } else if (height >= 700 && height < 800) { jQuery(".page-title").css("margin-top", "160px"); } else { jQuery(".page-title").css("margin-top", "220px"); } }
每次窗口大小改变时都会调用
：

$(window).resize(function () { fixMargin(); });

查看工作小提琴：http://jsfiddle.net/avqoran9/

修改2

<h1 class="page-title" style="margin-top: 7%">My Header</h1>

小提琴：http://jsfiddle.net/zeLdapnx/

Answer 2

好的，假设最大上限为220，最小值为100，这给我们的差异为120

假设最小高度为600且最大值为900

这意味着每个高度像素都会增加0.4像素的上边距。

所以我们有以下功能：

function fixMargin() {
   height = jQuery(window).height();

   var minMargin = 100;
   var maxMargin = 220;

   var differenceMargin = maxMargin - minMargin;

   var minHeight = 600;
   var maxHeight = 900;

   var calc = maxHeight - minHeight ;

   var adjuster = differenceMargin/calc;

   var differenceH = height - minHeight ;

   var marginTop = math.round(differenceH * adjuster);

   jQuery(".page-title").css("margin-top", marginTop);
}

我会强调这没有经过测试，但我认为它很接近

不同屏幕上的CSS margin-top问题

2 个答案: