时间戳

首页 > 解决方案 > 如何计算顶部距离以将标题定位在另一个 div 之上？

jquery - 如何计算顶部距离以将标题定位在另一个 div 之上？

问题描述

我试图让我的标题“站在另一个 div 的顶部”，以获得以下结果。使用绝对位置是可能的，但要使其响应，我需要检查所有断点并设置位置“硬编码”（我不知道你是否这样说），但要改变字体大小等。这似乎不是很干净。没有办法用jQuery计算这个距离吗？

当我试图弄清楚这一点时，我考虑过使用 jQuery 测量 .banner-dark 的高度，但是我有到这个 div 底部的距离，我需要到标题顶部的距离。所以它应该是这样的：“横幅的高度-深色”-“标题的高度”。但我不太确定如何做到这一点:)

我的小提琴：https ://jsfiddle.net/a349dhkt/ 

.banner-dark {
  height: 200px;
  width: 100%;
  background-color: darkgrey;
}

.article-white {
  background-color: white;
  height: 200px;
  width: 100%;
}

h1 {
  font-size: 50px;
  color: white;
  position: absolute;
  top: 128px;
  left: 100px;
}
<div class="banner-dark">

</div>
<div class="article-white">
  <h1 class="title">SPECIAL TITLE</h1>
</div>

我希望我的标题恰好位于每个视口的第二个 div 的顶部。

标签： jqueryhtmlcss

解决方案

我想你正在寻找这样的东西https://jsfiddle.net/an539fsg/

$( document ).ready(function() {
    /* get height of .title */
    var title = $(".title").height(); 

    /* get height of .article-white*/
    var article = $(".article-white").height();

    /* calculate distance */
    var new_height = article - title;

    /* apply to css */
    $('h1').css('top', new_height);  
});

推荐阅读