我正在使用 blogspot,我想准确地实现这种 float 导航栏:
如您所见,当您滚动时, float 导航栏在向下滑动时显示。
我所知道的就是制作一个导航栏:
<div id="floating-nav-content">
<div class="floating-nav">
<ul id="menu-floating-menu" class="menu">
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
</div>
但其余的 jQuery 或 javascript 内容对我来说仍然是未知的。我也搜索过,但他们没有教我想要的东西。
我只是 jQuery 的新手,我仍然不知道如何实现它。
非常感谢您的帮助。
最佳答案
这应该做你想做的。 (假设您已经包含了 jQuery 库)
<script type="text/javascript">
$(document).scroll(function() {
if ($(this).scrollTop() == 0) {
$("#floating-nav-content").slideUp(400);
} else {
$("#floating-nav-content").slideDown(600);
}
});
</script>
CSS 也很重要,因为它将导航栏放置在页面顶部的固定位置。
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
#floating-nav-content {
top: 0;
width: 100%;
height: 20px;
background-color: #000;
position: fixed;
display: none;
color: #FFF;
padding: 5px;
}
</style>
当然还有 HTML。 我将上面和下面的所有内容都放在了 body 标签中。
<div id="floating-nav-content">
Content
</div>
关于javascript - 在滚动条上显示 float 导航栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29983315/