在滚动条上显示浮动导航栏
Show a floating navigation bar on scroll
我用的是blogspot,正好想实现这种浮动导航栏:
如您所见,滚动时,浮动导航栏在向下滑动时显示。
我只知道做一个导航栏:
<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>
我用的是blogspot,正好想实现这种浮动导航栏:
如您所见,滚动时,浮动导航栏在向下滑动时显示。
我只知道做一个导航栏:
<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>