z-index:-999;
}
/*
* 此处效果同 #juice，z-index:-999; 表示放到最底层
*/
#mid .inner {
width:92px;
height:2000px;
background:url(strohalm_mid.png) repeat-y;
}
/*
* #mid .inner 则是吸管的图片设置
*/
</style>
<script type=”text/javascript”>
jQuery(document).ready(function($){
//记得在这段代码前面挂上 jQuery 库哈，忘记的童鞋拉出去切JJ一小时
$(window).scroll(function() {
//滚动条触发事件，目标则是整个窗口，即此窗口的滚动条
$(“#monitor”).html(“scrollTop: “+$(window).scrollTop());
//在 #monitor 里面随时监视 $(window).scrollTop() 的值
if ($(window).scrollTop()<1108) $(“#juice”).css(‘top’,490+815-$(window).scrollTop());
else $(“#juice”).css(‘top’,$(window).scrollTop()/2900*580)
//$(window).scrollTop()<1108 则液体停止增加，并且随滚动条上拉而下移
//反之则按滚动条滚动的比例增减
//1108是液体应该停止增加的时候，$(window).scrollTop()的值
//2900是页面高度，580是窗口的部分高度
//490 815 什么的小邪才不知道是什么咧（其实是这家伙忘记了
//反正随滚动条上拉而远离窗口顶部啦
});
})
</script>
<div id=”demo_menu” style=”position:fixed;bottom:10px;left:10px;z-index:999;”><a style=”color:#fff;” href=”/”>返回</a></div>
<div id=”monitor” style=””>scrollTop: 0</div>
<div id=”juice”><div class=”inner”></div></div>
<div id=”mid”><div class=”inner”></div></div>
<div id=”bottle”>
<div class=”header”></div>
<div class=”content”></div>
<div class=”footer”></div>
</div>
二. 尾记：
总结一下，恩恩，这样子是用于大家加深对 jQuery 和设计中对视觉滴应用滴理解（其实是小邪弄得自己蛋疼然后想拉上大家一起疼），理解完之后感觉无力的还是去用插件吧 (╯_╰) （小邪表示无力+1，这样的确有点折腾人 (=_-) 的说）。嘿嘿嘿嘿嘿 o(*￣▽￣*)ゞ。
演示代码打包下载
