Javascript:两个元素之间的垂直间距

Javascript: Vertical Spacing between two elements

本文关键字：之间 垂直 元素 两个 Javascript      更新时间：2023-09-26

我的网站由一个导航栏（类.nav-primary）、一个小部件框（id #mw-panel）和一篇文章组成。最近，我尝试将小部件框移到顶部，方法是对我的CSS文件进行以下更改：

.mw-panel{top: 50px;}

这个选项的问题是，我的元素被固定在一个特定的位置。相反，我希望小部件元素在菜单栏下正好是100px（当我向下滚动页面时会移动）。很快，我就知道JavaScript将是解决这个问题的正确方法。

因为我没有成功，我问了StackOverflow社区，这对我帮助很大。

所附代码片段的JS部分中的JavaScript代码部分由我完成，但它并不能正常工作。

有人能解释一下我需要更改什么才能让JS代码正常工作吗？同样，#mw-panel必须精确地定位在.nav-primary下方100px处。

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。这是你的问题。

如果我理解正确的话，您有三个项目：导航、文章和小部件框。您希望小部件框位于导航下方100像素，然后在滚动时随页面移动。

如果是这种情况（如果不是，请纠正我），那么你只需要做几件事：

  1. 保持你的导航原样。干得好。

  2. 我假设您想要文章旁边的小部件（在左边？）。因此，您需要制作两列（某种容器，每个容器为height: 100%）。您的小部件容器将具有属性position: fixed;，文章将具有position: static;（或relative，由您决定）。

  3. 每个容器都有一个宽度，例如，您可以为小部件容器选择30%，为文章选择70%。

  4. 现在您有两列，其中一列将随着页面的滚动而移动。

这里有一些链接可以让你开始：

在HTML/CSS 中实现列的最佳方法

https://css-tricks.com/guide-responsive-friendly-css-columns/

http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/

相关文章：