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

   十二月 04, 2011       MGT@blogger

---

From Evernote:

blogger:固定导航栏位置以及滑动伸缩效果 Clipped from: http://www.360doc.com/content/08/0110/06/12542_959892.shtml

    这是无意中发现的，一个很酷的效果，我在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中


<script src='http://jscripts.ning.com/id/1093360' type='text/javascript'></script>
<script src='http://jscripts.ning.com/id/1093361' type='text/javascript'></script>
<script src='http://jscripts.ning.com/id/1093362' type='text/javascript'></script>


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


<div align='center' ><a onclick='new Effect.toggle("自定义ID", "blind");'><b>打开/关闭导航栏</b></a></div>


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


<div id='自定义ID' style='display:none;'>


注意"自定义ID"必须和上面的导航栏按钮相同

几点使用经验：

1.注意作用域，举个例子，如果你在修改代码中添加了隐藏导航栏的代码，那么开关按钮也必须添加到修改代码当中，如果把开关添加到了widget是无效的。

也就是说，代码的位置必须保持一致。，要么都放到修改代码，要么都放到widget当中。

而且你还可以把代码放到不同widget中，什么意思呢？无比说你把开关添加到widget html1，然后把隐藏的添加到widght html2依然是有效果的。

2.注意用户体验，考虑到虽然很多访问者都用上了17寸以上的显示器，但不是每个人都在用液晶的，统计数据得知，80%以上的人都是使用1024*768的分辨率，我们就必须考虑到页面大小的问题，我使用的分辨率是1280*1024，我的导航栏完全打开以后占用了70％的浏览窗口，如果是1024的话，就会完全占用了105%！！，要命的是，多出的5%都移动到了浏览窗口之上，而这个导航栏是没有滚动条的。。。。也就是说这5%的内容永远都看不到，而刚好我的开关就在这5%中，1024的话，导航栏根本就关不上。

所以我的解决方法是在最底部再多增加一个开关，你也可以增加滚动条，但导航栏过高绝对不是个好的用户体验。