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

我的网站由一个导航栏（class

.nav primary

）、一个小部件框（id

#mw panel

）和一篇文章组成。最近，我尝试通过对CSS文件应用以下更改，将小部件框上移到顶部：

.mw-panel{top: 50px;}

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

因为我没有成功，我问了一个问题，这对我帮助很大

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

有人能告诉我，为了让这个JS代码正常工作，我需要改变什么吗？同样，

#mw面板

必须精确定位在

.nav primary

下方100px处

var menu=document.getElementsByClassName（“导航主”）[0]；
var widget=document.getElementById（“mw面板”）；
变量差异=widget.offsetTop-menu.offsetBottom；
如果（差异>100）{
document.getElementById（“mw面板”）.style.top=（menu.offsetBottom+100）+“px”；
}

.content.entry{
边缘顶端：40px；
填充底部：400px；
}

韦克泽格

重新阅读您的问题后，我遗漏了一个关键细节：您正在尝试使用JavaScript。这是你的问题

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

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

保持导航不变。干得好

我假设您想要文章旁边的小部件（在左边？）。因此，您需要创建两列（某种容器，每个

高度：100%

）。您的小部件容器将具有属性

position:fixed

和文章将具有

位置：静态（或
相对
，由您决定）

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

现在您有了两列，其中一列将随着页面滚动而移动

以下是一些帮助您入门的链接：

---

重新阅读您的问题后，我错过了一个关键细节：您正在尝试使用JavaScript。这是你的问题

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

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

保持导航不变。干得好

我假设您想要文章旁边的小部件（在左边？）。因此，您需要创建两列（某种容器，每个

高度：100%

）。您的小部件容器将具有属性

position:fixed

和文章将具有

位置：静态（或
相对
，由您决定）

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

现在您有了两列，其中一列将随着页面滚动而移动

以下是一些帮助您入门的链接：

---

没有像

offsetBottom

这样的属性。重做代码时，只需考虑

offsetTop

+

offsetHeight

，即可获得底部数字

例如：

var menu = document.getElementsByClassName("nav-primary")
var TrueOffset=menu[0].offsetTop+menu[0].offsetHeight;

您收到错误是因为没有

offsetBottom

属性

在chrome中执行

console.log（菜单）

，查看可用的对象属性

**更新：

将此添加到css中：

.mw-panel{
position: absolute;  
  }

---

没有像

offsetBottom

这样的属性。重做代码时，只需考虑

offsetTop

+

offsetHeight

，即可获得底部数字

例如：

var menu = document.getElementsByClassName("nav-primary")
var TrueOffset=menu[0].offsetTop+menu[0].offsetHeight;

您收到错误是因为没有

offsetBottom

属性

在chrome中执行

console.log（菜单）

，查看可用的对象属性

**更新：

将此添加到css中：

.mw-panel{
position: absolute;  
  }

---

尝试在所有DOM元素之后添加

标记，就在

之前。您的脚本可能没有正确加载DOM，这就是为什么它找不到

#mw panel

或按照@AlexL中的描述放置脚本的原因。我想这并不是问题的原因。我在stackoverflow代码编辑器的右侧部分添加了JS代码，因此默认情况下它应该自动定位在末尾。在全视图中查看正在运行的代码段时，您可以看到它没有移到顶部。@OtakuKyon Chrome在我运行您的代码段时没有报告任何错误，您能验证错误是否消失了吗？@AlexL在将代码移到标记末尾后修复了DOM错误，但是脚本仍然不起作用尝试在所有DOM元素之后添加

标记，就在

之前。您的脚本可能没有正确加载DOM，这就是为什么它找不到

#mw panel

或按照@AlexL中的描述放置脚本的原因。我想这并不是问题的原因。我在stackoverflow代码编辑器的右侧部分添加了JS代码，因此默认情况下它应该自动定位在末尾。