gpt4 book ai didi

javascript - 固定在视口(viewport)下方并在视口(viewport)中滚动一次的菜单?

转载 作者:太空宇宙 更新时间:2023-11-04 08:48:43 27 4
gpt4 key购买 nike

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

无论这个人对侧边栏菜单做了什么都很棒,我很想复制它。我试过检查,但我无法确定它是如何工作的。在我看来,菜单的行为就好像它是固定在 css 中的,但只有在向下滚动视口(viewport)时它才会变得可见……但是我看不到淡入或其他 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 并且它对下划线有效...

最佳答案

你可以给我们Bootstrap为此添加词缀 - 非常简单。

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

编辑:我的意思是第一次添加 - 抱歉 friend 。从好的方面来说,它更容易使用 Affix。

关于javascript - 固定在视口(viewport)下方并在视口(viewport)中滚动一次的菜单?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43593006/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com