使用 $(window).height() 的屏幕视口答案

【问题标题】：screen Viewport using $(window).height()使用 $(window).height() 的屏幕视口
【发布时间】：2016-05-31 17:42:44
【问题描述】：

我正在使用$(window).height() 计算我的视口大小，它返回339 现在我想把我的屏幕分成三个部分。上、中、下。我想知道知道返回的屏幕高度是 339，我该如何计算。

我想知道总共有多少px (339) 将被覆盖在 20% 的顶部、60% 的中间和 20% 的底部。我将如何计算这个？有人可以帮我解决这个问题吗？另外，我的方法对吗？

【问题讨论】：

【解决方案1】：

数学很简单：

(winH = 339)

0.6 * winH = middleH (203.4)
0.2 * winH = topH, 两者 (67.8)

但是，嘿！为什么需要 jQuery？

html, body{height:100%; margin:0;}

#top,
#bot{
  height:20vh;
  background:#0bf;
}
#mid{
  height:60vh;
  background:#f0b;
}

<div id="top"> top </div>
<div id="mid"> mid </div>
<div id="bot"> bot </div>

【讨论】：

实际上，我想将顶部、中间、底部像素值存储在 jquery 变量中。我有一个 HTML 元素，我想将它的 position 与这些变量进行比较。例如，if($(element).position < top)
那么如果我的元素位于底部区域，我怎么知道？
基本上，对于这个解决方案stackoverflow.com/questions/37485342/…，我试图获取屏幕的顶部、中间和底部区域，以便比较我的元素所在的位置