我的网站由一个导航栏(类 .nav-primary)、一个小部件框(id #mw-panel)和一篇文章组成。最近，我尝试通过对 CSS 文件应用以下更改来将小部件框移至顶部:
.mw-panel{top: 50px;}
此选项的问题是，我的元素被固定到特定位置。相反，我希望小部件元素恰好位于菜单栏下方 100 像素处(并且当我向下滚动页面时移动)。我立刻就知道 JavaScript 将是解决这个问题的正确方法。
因为没有成功，所以问了StackOverflow community ，这对我帮助很大。
所附代码片段的 JS 部分中的 JavaScript 代码部分是由我完成的，但它无法正常工作。
有人可以解释一下我需要更改什么才能让这段 JS 代码正常工作吗？同样，#mw-panel 必须位于 .nav-primary 下方 100 像素处。
var menu = document.getElementsByClassName("nav-primary")[0];
var widget = document.getElementById("mw-panel");
var difference = widget.offsetTop - menu.offsetBottom;
if (difference > 100) {
document.getElementById("mw-panel").style.top = (menu.offsetBottom + 100) + "px";
}.content .entry {
margin-top: 40px;
padding-bottom: 400px;
}<body class="full-width-content">
<link rel="stylesheet" id="child-theme-css" href="http://vocaloid.de/wp-content/themes/Vuturize/style.css" type="text/css" >
<div class="site-container">
<nav class="nav-primary">
<div class="wrap">
<ul class="menu genesis-nav-menu menu-primary">
<li class="menu-item"><a href="#">Home</a>
</li>
<li class="menu-item"><a href="#">News</a>
</li>
<li class="menu-item"><a href="#">Ranking</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="site-inner">
<div class="content-sidebar-wrap">
<main class="content">
<article class="page entry">
<div>
<h1>Test Article</h1>
</div>
</article>
</main>
</div>
</div>
<div id="mw-panel">
<div>
<h3>Navigation</h3>
<div>
<ul>
<li><a href="#">Letzte Änderungen</a>
</li>
</ul>
</div>
</div>
<h3>Werkzeuge</h3>
<div>
<ul>
<li><a href="#">Datei hochladen</a>
</li>
<li><a href="#">Spezialseiten</a>
</li>
</ul>
</div>
</div>
</body>最佳答案
没有 offsetBottom 这样的属性。仅考虑 offsetTop + offsetHeight 重做代码以获得底部数字。
示例:
var menu = document.getElementsByClassName("nav-primary")
var TrueOffset=menu[0].offsetTop+menu[0].offsetHeight;
您收到错误是因为没有 offsetBottom 属性。
在 Chrome 中执行 console.log(menu) 以查看对象的可用属性
**更新:
将其添加到您的 CSS 中:
.mw-panel{
position: absolute;
}
关于Javascript:两个元素之间的垂直间距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34601302/