Question

我的网站包含导航栏（类Imports System.DirectoryServices.Protocols Imports System.Net Module Module1 Sub Main() ' setup your creds, domain, and ldap prop array Dim username As String = "ou=Tool,ou=applications,o=xxx,c=ca" Dim pwd As String = "something@2015" Dim domain As String = "DC=xxx,DC=corp,DC=xxx,DC=ca" Dim propArray() As String = {"employeenumber"} ' setup your ldap connection, and domain component Dim ldapCon As LdapConnection = New LdapConnection("xxx.test.intranet.xxx.ca:389") Dim networkCreds As NetworkCredential = New NetworkCredential(username, pwd, domain) ' configure the connection and bind ldapCon.AuthType = AuthType.Negotiate ldapCon.Bind(networkCreds) ' if the above succceeded, you should now be able to issue search requests directly against the directory Dim searchRequest = New SearchRequest(domain, "(employeenumber=6012589)", SearchScope.Subtree, propArray) ' issue the search request, and check the results Dim searchResult As SearchResponse = ldapCon.SendRequest(searchRequest) Dim searchResultEntry As SearchResultEntry If (searchResult.Entries.Count > 0) Then ' we know we've located at least one match from the search ' if you're only expecting to get one entry back, get the first item off the entries list searchResultEntry = searchResult.Entries.Item(0) ' continue to do whatever processing you wish against the returned SearchResultEntry End If End Sub End Module），小工具框（标识.nav-primary）和文章。最近，我尝试将小部件框移到顶部，方法是对我的CSS文件应用以下更改：

#mw-panel

此选项的问题是，我的元素已固定到特定位置。相反，我希望widget元素在菜单栏下正好是100px（当我向下滚动页面时移动）。我立刻就知道JavaScript是解决这个问题的正确方法。

因为我没有成功，所以我问StackOverflow community，这对我帮助很大。

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

有人可以解释一下我需要更改以使这个JS代码正常工作吗？同样，.mw-panel{top: 50px;}必须恰好位于#mw-panel下方100px处。

＆＃13;

.nav-primary

＆＃13;

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";
}

＆＃13;

.content .entry {
    margin-top: 40px;
  padding-bottom: 400px;
}

＆＃13;

Answer 1

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

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

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

保持导航的方式。这里干得好。
我假设你想要文章旁边的小部件（在左边？）。因此，您需要制作两列（某种容器，每个height: 100%）。您的小部件容器将包含属性position: fixed;，文章将position: static;（或relative，您决定。）
每个容器都有一个宽度，例如，您可以为小部件容器选择30％，为文章选择70％。
现在您有两列，当您滚动时，其中一列将与页面一起移动。

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

Best Way to do Columns in HTML/CSS

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

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

Answer 2

没有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;  
  }

Here it is in action

Updated code in action

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

2 个答案: