Question

目前，我正在处理单个网页并遇到一些问题，最终输出是单击链接菜单时，它没有进入目标div位置（如果我错了，请纠正我）。当再次点击链接时，它将转到另一个位置。

我遵循本教程callmenick

以下是它的复制品jsfiddle

<nav>
  <ul>
    <li><a href="#overview">Overview</a></li> <- when any click link, and then click again, there's some action happen. *bugs?*
    <li><a href="#tech-spec">Tech Spec</a></li>
    <li><a href="#support">Support</a></li>
  </ul>
</nav>

Answer 1

您需要做的是添加缺少的购买部分，并在导航栏中将href添加到链接中，例如：

<nav>
  <ul>
    <li><a href="#overview">Overview</a></li>
    <li><a href="#tech-spec">Tech Spec</a></li>
    <li><a href="#support">Support</a></li>
    <li><a href="#buy">Buy</a></li> <!-- You are missing your href attribute here -->
  </ul>
</nav>

所有其他似乎都运转正常。

Answer 2

我的机器上没有任何问题，但可以通过其他方式处理此功能。请参阅下面的示例，这可能会解决问题

添加锚类
添加数据属性
制作滚动到某一点的全局功能

例如

        modelBuilder.Entity<Address>()
                    .HasRequired(a => a.Person)
                    .WithOptional(s => (s as Student).Address);

变为

<div id="button-name"></div>

现在需要执行JavaScript操作，此操作会读取 data-anchor-dest 属性并滚动到该属性。

<div id="button-name" class="scrollAnchor" data-anchor-dest="#section-more-info"></div>

现在常见的问题是，它有多兼容？ This compatible，我已经在IE9中对此进行了测试，但它确实有效。

这个答案可能更像是拆解而非修复，但我希望这有助于

Answer 3

现在我明白了，

问题是固定导航不再是文档流程的一部分。因此它不会保留高度。或者换句话说，其他元素不再知道它的存在。就像display: none;

一样

您需要找到一种方法，按固定导航的高度向下推动元素，但仅限于导航是固定的。

有几种方法，但这取决于布局。首先想到的是应用padding-top: ?px;一旦固定应用于导航，就通过JS到#product-nav。

编辑： https://jsfiddle.net/ju648br4/4/

粘性滚动导航菜单

3 个答案: