Question

我不知道如何描述这个，所以最好是链接一个例子：http://www.pascalvangemert.nl/#/profile

无论这个人用侧边栏菜单做了什么都很棒，我很想复制它。我试过检查，但我无法确定它是如何工作的。在我看来，菜单的行为好像它是在css中修复的，但只有在向下滚动视口时才会变得可见......但是我没有看到任何淡入淡出或其他jQuery技巧。有人有想法吗？这是我到目前为止所拥有的。 HTML：

<ul class="nav">
<li><a href="#">Profile</a></li>
<li><a href="#">Experience</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>

CSS：

.nav
{
    position: fixed;
    display: inline-block;
    font-family: "verdana";
    text-align: left;
    z-index: 3;
    right: 30px;
    top: 200px;
}

.nav a
{
    display: inline-block;
    padding: 20px;
    text-decoration: none;
    color: #ededed;
}

.nav a:hover
{
    color: #000000;
}

另外，我很遗憾为什么.nav在链接旁边仍然有点，即使我已经为文本修饰规则指定了 none 并且它适用于下划线...

Answer 1

你可以为我们Bootstrap加上这个 - 非常简单。

<div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
  ...
</div>

编辑：我第一次认为是Affix - 道歉的朋友。从好的方面来说，它更容易使用Affix。

一个固定在视口下方并在视口中滚动一次的菜单？

1 个答案: