通过JavaScript将样式顶部添加到其他高度元素的ID元素中

Question

我获得了HeaderHeight的ID元素header_top

然后将样式顶部添加到ID元素menu_fix，但我的JavaScript无法正常工作。

请让我检查我的JavaScript是否有效。谢谢

var HeaderHeight = document.getElementById('header_top').clientHeight;
document.getElementById("menu_fix").style.top = '"' + HeaderHeight + '"';

body {
  height: 100%;
  background: #ccc;
}
#header_top {
background: red;
padding: 10px;
  position: relative;
}
#menu_fix {
position: fixed;
width: 100%;
height: 30px;
background: blue;
left: 0;
z-index: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header_top">
Lorem ipsum dolor sit amet,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,  At vero eos et accusam et justo duo dolores et ea rebum
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,  At vero eos et accusam et justo duo dolores et ea rebum
  Lorem ipsum dolor sit amet,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,  At vero eos et accusam et justo duo dolores et ea rebum
  Lorem ipsum dolor sit amet,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,  At vero eos et accusam et justo duo dolores et ea rebum</p>
</div>
<div id="menu_fix">

</div>

Answer 1

为了完成这项工作，您需要更改以下行：

document.getElementById("menu_fix").style.top = '"' + HeaderHeight + '"';

至：

document.getElementById("menu_fix").style.top = HeaderHeight + 'px';

这是小提琴：https://jsfiddle.net/hdcon056/1/

Answer 2

您已经在使用jquery，因此可以很好地工作

$('#menu_fix').css({top: $('#header_top').outerHeight()});