javascript - 通过JavaScript将样式top添加到其他高度元素的ID元素

Question

我已经获得了ID元素header_top的HeaderHeight

并将样式 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';

这是 fiddle :https://jsfiddle.net/hdcon056/1/