FableTown: blogger:固定导航栏位置以及滑动伸缩效果

来源：百度文库编辑：神马文学网时间：2024/10/02 22:23:48

blogger:固定导航栏位置以及滑动伸缩效果
发表时间：1/25/2007
这是无意中发现的，一个很酷的效果，我在blogger-hacked看到了他把CC许可固定在浏览器的最前端，同时按on/off还会滑动，当时我就想如果把这效果用到导航栏中，不但实用，还能够节省大量空间，通过查看代码，我终于找到了方法，实际上要实现并不困难（因为最难的JS脚本老外都帮我们实现了 ;-)），而且理论上不但blogger，任何网页都可以使用这个方法。
固定导航栏
我们以#footer为例，你可以使用到任何侧边栏上，这里除了固定位置以外，还使用背景透明，修改对应的CSS样式
#footer {
position: fixed;
border-top: 1px solid #ddd;
border-bottom: 10px solid #f5f5f5;
background-color: #f5f5f5;
width: 100%;
left: 0px;
text-align: left;
color: #888;
font-size: 11px;
z-index:10000;
opacity: 0.9;
filter: alpha(opacity: 90);
_position:absolute;
bottom:0;
_top:expression(document.body.scrollTop+document.body.clientHeight-this.clientHeight);
}
滑动效果
添加以下连接到你的head中

接下来添加开关导航栏的按钮

打开/关闭导航栏

最后把你需要隐藏的部分放到下面的DIV中

FableTown: blogger:固定导航栏位置以及滑动伸缩效果草履虫的BLOG-区域块伸缩效果实现(toggle效果) Blogger 常用手机地图以及导航软件仿淘宝网站的导航标签效果！球拍式导航菜单效果的实现模仿Flash AS效果的导航菜单模仿Flash AS效果的导航菜单模仿Flash AS效果的导航菜单 Blogger - Wikipedia 滑动侧边菜单栏示例模块，滑动版式滑动轴承材料滑动轴承简述 CSS仿淘宝首页导航条布局效果 CSS仿淘宝首页导航条布局效果洋葱浸葡萄酒惊人效果以及洋葱的药用价值 100多种边框的做法以及下雨效果制作 100多种边框的做法以及下雨效果制作如何选购电动伸缩门 Mykeylock滑动解锁使用教程常用的滑动门代码东拉西扯：精英blogger和草根blogger about blogger: ftp by blogger (setup)