想做个随屏幕滚动儿滚动的垂直导航，没思路了。请教这样的效果应该怎么实现呀
<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>固定悬浮垂直导航 - 联系</title>
<style>
body { margin:0;}
ul,li { display:block; margin:0; padding:0; list-style-type:none;}
#wrap { width:950px; margin:0 auto; position:relative;}
ul#ul li { height:255px; font-size:100px; text-align:center; line-height:200px; color:white;}
ul#ul li.li1 { background:black;}
ul#ul li.li2 { background:green;}
ul#ul li.li3 { background:blue;}
ul#ul li.li4 { background:red;}
ul#ul li.li5 { background:yellow;} ul#nav { width:100px; background:purple; color:#AAA; border0:1px solid #CCC; position:absolute;}
</style>
<script src="http://jhi.me/source/global.js"></script>
</head><body>
<script>
function initAll(){
var lis = document.getElementById("ul").getElementsByTagName("li");
for(var i = 0; i < lis.length; i++){
addClass(lis[i],"li" + (i + 1))
}
}
function initNav(){
var wrap = document.getElementById("wrap");
var nav = document.getElementById("nav");
nav.style.top = "365px";
nav.style.left = "-100px";
window.onscroll = function(){
//alert("100+");
}
//alert("test");
}
addLoadEvent(initAll);
addLoadEvent(initNav);
</script>
<div id="wrap">
<ul id="ul">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ul id="nav">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
</div></body>
</html>
<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>固定悬浮垂直导航 - 联系</title>
<style>
body { margin:0;}
ul,li { display:block; margin:0; padding:0; list-style-type:none;}
#wrap { width:950px; margin:0 auto; position:relative;}
ul#ul li { height:255px; font-size:100px; text-align:center; line-height:200px; color:white;}
ul#ul li.li1 { background:black;}
ul#ul li.li2 { background:green;}
ul#ul li.li3 { background:blue;}
ul#ul li.li4 { background:red;}
ul#ul li.li5 { background:yellow;} ul#nav { width:100px; background:purple; color:#AAA; border0:1px solid #CCC; position:absolute;}
</style>
<script src="http://jhi.me/source/global.js"></script>
</head><body>
<script>
function initAll(){
var lis = document.getElementById("ul").getElementsByTagName("li");
for(var i = 0; i < lis.length; i++){
addClass(lis[i],"li" + (i + 1))
}
}
function initNav(){
var wrap = document.getElementById("wrap");
var nav = document.getElementById("nav");
nav.style.top = "365px";
nav.style.left = "-100px";
window.onscroll = function(){
//alert("100+");
}
//alert("test");
}
addLoadEvent(initAll);
addLoadEvent(initNav);
</script>
<div id="wrap">
<ul id="ul">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ul id="nav">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
</div></body>
</html>
<html>
<head>
<meta charset="gb2312">
<title>固定悬浮垂直导航 - 联系</title>
<style>
body { margin:0;}
ul,li { display:block; margin:0; padding:0; list-style-type:none;}
#wrap { width:950px; margin:0 auto; position:relative;}
ul#ul li { height:255px; font-size:100px; text-align:center; line-height:200px; color:white;}
ul#ul li.li1 { background:black;}
ul#ul li.li2 { background:green;}
ul#ul li.li3 { background:blue;}
ul#ul li.li4 { background:red;}
ul#ul li.li5 { background:yellow;}
ul#nav { width:100px; background:purple; color:#AAA; border0:1px solid #CCC; position:absolute;}
</style>
<script src="http://jhi.me/source/global.js"></script>
</head>
<body>
<script>
function initAll(){
var lis = document.getElementById("ul").getElementsByTagName("li");
for(var i = 0; i < lis.length; i++){
addClass(lis[i],"li" + (i + 1))
}
}
function initNav(){
var wrap = document.getElementById("wrap");
var nav = document.getElementById("nav");
nav.style.top = "365px";
nav.style.left = "-100px";
window.onscroll = function(){
sTop = document.body.scrollTop || document.documentElement.scrollTop;
nav.style.top = sTop + 365 + 'px'
}
//alert("test");
}
addLoadEvent(initAll);
addLoadEvent(initNav);
</script>
<div id="wrap">
<ul id="ul">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ul id="nav">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
</div>
</body>
</html>
这个意思？
<style type="text/css">
.fixed {
position: fixed;
}
</style>
问题：
1、垂直导航的滚动不是很流畅；
2、滑到页面中部刷新的时候，垂直导航有问题；
3、多个函数中用到同一个变量，要多次申明，有没有其他办法不用多次申明的，除了全局变量。
<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>固定悬浮垂直导航 - 练习</title>
<style>
body { margin:0;}
ul,li { display:block; margin:0; padding:0; list-style-type:none;}
#wrap { width:768px; margin:0 auto; position:relative;}
ul#ul li { height:400px; font-size:123px; text-align:center; line-height:255px; color:white;}
ul#ul li.li1 { background:black;}
ul#ul li.li2 { background:green;}
ul#ul li.li3 { background:blue;}
ul#ul li.li4 { background:red;}
ul#ul li.li5 { background:yellow;}
ul#ul li.li6 { background:purple;}
ul#nav { width:100px; background:purple; color:#AAA; border0:1px solid #CCC; position:absolute;}
ul#nav li a { display:block; border-bottom:1px solid #CCC; line-height:30px; text-align:center; color:#9FC;}
</style>
<script src="http://jhi.me/source/global.js"></script>
</head>
<body>
<script>
function initAll(){
var lis = document.getElementById("ul").getElementsByTagName("li");
for(var i = 0; i < lis.length; i++){
addClass(lis[i],"li" + (i + 1))
}
}
function autoScroll(){
var nav = document.getElementById("nav");
var sTop = document.body.scrollTop || document.documentElement.scrollTop;
var vTop = sTop + 123;
var iTop = parseInt(nav.style.top);
if( iTop < vTop){
iTop++;
}
if( iTop > vTop){
iTop--;
}
nav.style.top = iTop + "px";
setTimeout(autoScroll,20);
}
function initNav(){
var wrap = document.getElementById("wrap");
var nav = document.getElementById("nav");
nav.style.top = 123 + "px";
nav.style.left = "-100px";
window.onscroll = function(){
autoScroll();
//中间用了||是考虑了这两个属性的浏览器兼容性
//网页被卷去的高： document.body.scrollTop;
//document.documentElement.scrollTop 垂直方向滚动的值
}
}
addLoadEvent(initAll);
addLoadEvent(initNav);
</script>
<div id="wrap">
<ul id="ul">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<ul id="nav">
<li><a href="">A</a></li>
<li><a href="">B</a></li>
<li><a href="">C</a></li>
<li><a href="">D</a></li>
<li><a href="">E</a></li>
</ul>
</div>
</body>
</html>
这个是简单，但并不是那么友好IE6的兼容性有点小问题，
再说楼主的意思是想 跟随滚动，而不是定着不动，他可能想有点互动的效果，<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery浮动菜单跟随页面滚动左侧浮动菜单</title>
<meta name="description" content="jquery浮动菜单制作左侧浮动导航菜单跟随页面滚动始终保持浮动在页面，当鼠标滑过浮动菜单时展示二级下拉菜单效果。" />
<style type="text/css">
body
{
margin: 0px;
padding: 0px;
background: #fff;
font-family: "Arial Black" , Arial, Helvetica, sans-serif;
}
.content
{
width: 520px;
margin: 50px auto;
}
/* fl_menu */
#fl_menu
{
position: absolute;
top: 0px;
background: green;
width: 150px;
height: 50px;
width: 100%;
}
#fl_menu .label
{
padding-left: 20px;
line-height: 50px;
font-size: 14px;
font-weight: bold;
background: #000;
color: #fff;
letter-spacing: 7px;
}
#fl_menu .menu
{
display: none;
}
#fl_menu .menu .menu_item
{
display: block;
background: #000;
color: #bbb;
border-top: 1px solid #333;
padding: 10px 20px;
font-size: 12px;
text-decoration: none;
}
#fl_menu .menu a.menu_item:hover
{
background: #333;
color: #fff;
}
</style>
<script type="text/javascript" src="http://www.jsfoot.com/skin/js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script src="js/lazyload1.js" type="text/javascript"></script>
<script type="text/javascript">
function FloatMenu() {
var animationSpeed = 100;
var animationEasing = 'easeOutQuint';
var scrollAmount = $(document).scrollTop();
var newPosition = menuPosition + scrollAmount;
$("#test1").text(newPosition);
if (newPosition > 1000) return;
if ($(window).height() < $('#fl_menu').height() + $('#fl_menu .menu').height()) {
$('#fl_menu').css('top', menuPosition);
} else {
$('#fl_menu').stop().animate({ top: newPosition }, animationSpeed, animationEasing);
}
}
$(window).load(function () {
menuPosition = $('#fl_menu').position().top;
FloatMenu();
});
$(window).scroll(function () {
FloatMenu();
});
$(document).ready(function () {
var fadeSpeed = 500;
$("#fl_menu").hover(function () {
$('#fl_menu .label').fadeTo(fadeSpeed, 1);
$("#fl_menu .menu").fadeIn(fadeSpeed);
}, function () {
$('#fl_menu .label').fadeTo(fadeSpeed, 0.75);
$("#fl_menu .menu").fadeOut(fadeSpeed);
});
});
</script>
<script type="text/javascript">
$(function () {
$("img").lazyload({
effect: "fadeIn"
});
});
</script>
</head>
<body>
<div id="fl_menu">
<div class="label">
jsfoot</div><div id="test1">11
jsfoot</div>
<div class="menu">
<a href="http://www.jsfoot.com" class="menu_item">jquery 特效</a> <a href="http://www.jsfoot.com"
class="menu_item">javascript特效</a> <a href="http://www.jsfoot.com" class="menu_item">
flash特效</a> <a href="http://www.jsfoot.com" class="menu_item">div+css教程</a>
<a href="http://www.jsfoot.com" class="menu_item">html5教程</a>
</div>
</div>
<div class="content">
<h1>
一个长的内容</h1>
<p>
此页发表评论。即使是现在，它的整体形象。高考前首先在喉咙里奥奇的悔恨和复仇的关怀他们的沙发，在此欢迎使用WordPress。成员的附带福利。对于信息，容易抢，而不是一个全面的平台。明天是不是有很多的媒体。关于现在，我的床在一个泵，它可能要发表评论，但无生命的主要平台。你只是感觉不错，和更多来自中国的，但是从一开始。家居用品，现在，积极引导更多的更多信息，请联系酒店地区股票不会。即使是绿色的湖。打软的笑声悲伤，不能多也不能销售。欧盟现在。我们中毒闸极漏电流。近期的指标和评估，需要更多的成员。为了攫取更多的土地和发展权。明天是一个狮子，或者一个简单的时间和笑声的价格。明天丑陋的猫，或休闲为导向的经济实惠和生态的恐惧。</p>
<p>
即使篮球哀悼。了解更多关于选项。管理员权限的移民法庭。超过1个月，在下午的工作中，有总是更多。直到恨日本的生活比利润多一点的生活。联系。明天的网页模板酒店移民的喉咙，减少更多。没有在前面打结。家庭也不是现在。背景我们的婚姻秘密类转，非常初级的himenaeos。最近的价格页面。告诉朋友关于钻孔，烦恼的生活指标。超过一张床，但是，他是AMET想要更多。入口是成员的发展和或箭头。现在一个蝴蝶结，和渡轮的价格，但菜单博客。显示平台带来的。明天和一把铁锹视频，越来越多的成员。在新闻中，这是一条评论。</p>
<p>
明天的故事门廊。想了解更多信息恨价格因素。欢迎光临网页在线商品库存信息。我们的货运基地在一个的瓮RokNewsFlash临床问题。中国的优势，这当然任何人的投资。学习不占床，喝喉咙肿块。请不要嘲笑，抓住消费者的需求。作为运输工具，一些自我感觉良好是暂时的，但现在有更多的，我的，它仅仅是在学校，但评论。添加到物料的温度，长期会员，并且，作为一个伟大的装饰不会被公开。有关详细信息，这是一个种族，多饮。背景我们的婚姻秘密类转，非常初级的himenaeos。虽然悲伤和痛苦或生态问题。但欧盟的丑陋。这是星球，而不是更多的存储空间。现在停止，愿意详细，有趣的猫的猫，但在大智慧的蝴蝶结。这个伟大的开始，任何软相机温度的蛋白质。</p>
<p>
您同意和橙色槽温度门门廊。在此之前，有关于任何质量箭头没有必要。我们讨厌钻，柔和的香料和的规划和压力。更全面的交通是暂时的。欢迎您的湖泊，但狮子，互联网的时间。了解更多关于疼痛，但他希望有更多的门廊。即使是基本的温度，全面的价格和生态附带的网站。请蝴蝶结，但它的任何人的临床雇员。锁控制元素，但谁发表的条例草案。没有一个人的生命，地球和猫门廊军团。阅读更多更多更多更多更多更多的是现在怀孕。关于在线和价格的指标是可行的。欲了解更多，这里是你的前廊，它消失之前，或超过一个免费的在线信息。明天的肿块。</p>
<p>
没有酵母或弓。欢迎到中国来，以提供更多的弹性，这是一个恨，抓取信息的头版笑声。此页发表评论。我们的移民指标是一个甲板，汽车可以提供。背景我们的婚姻秘密类转，非常初级的himenaeos。选择的饮品，谁不是今天。在这篇文章中。今天，这里的结果，中国的报警指标，狮子的开始。你想现在也不是纯粹的产品。公司的权利和总结。这个网站在这里是一种犯罪行为，请联系作者。城市生态进行全面系统的要求。主菜单的奥运旅游弓箱。但是，除非它是免费的，但有时它是一个湖。了解更多关于软弓的车辆。明天不只是设计师或只是车辆JOOMLA。首页单元博客既不是不时页。大家的欢迎，现在喝的战略需求。关于我们产品没有更多的信息。</p>
</div>
<p style="height: 200px;">
<img width="140" height="140" alt="JXD S7300 Dual Core Game Tablet PC 7 Inch HD Screen Android 4.1 1GB/8GB - Black"
src="images/Loading.gif" data-url="http://img.lightake.com/image201212/sku_61840_1_small.JPG"
style="display: inline;">
</p>
<p style="height: 200px;">
<img width="140" height="140" alt="MK809 II TV Box Mini PC Android 4.1 Dual Core 1.6GHz Wifi Bluetooth 8GB"
src="images/Loading.gif" data-url="http://img.lightake.com/image201212/sku_61374_1_small.jpg"
style="display: inline;">
</p>
<p style="height: 200px;">
<img width="140" height="140" alt="MK809 II TV Box Mini PC Android 4.1 Dual Core 1.6GHz Wifi Bluetooth 8GB"
src="images/Loading.gif" data-url="http://img.lightake.com/image201212/sku_61800_1_small.jpg"
style="display: inline;">
</p>
<p style="height: 200px;">
<img width="140" height="140" alt="MK809 II TV Box Mini PC Android 4.1 Dual Core 1.6GHz Wifi Bluetooth 8GB"
src="images/Loading.gif" data-url="http://img.lightake.com/image201212/sku_61821_1_small.jpg"
style="display: inline;">
</p>
<p style="height: 200px;">
<img width="140" height="140" alt="MK809 II TV Box Mini PC Android 4.1 Dual Core 1.6GHz Wifi Bluetooth 8GB"
src="images/Loading.gif" data-url="http://img.lightake.com/image201212/sku_61821_1_small.jpg"
style="display: inline;">
</p>
<p style="height: 200px;">
<img width="140" height="140" alt="MK809 II TV Box Mini PC Android 4.1 Dual Core 1.6GHz Wifi Bluetooth 8GB"
src="images/Loading.gif" data-url="http://img.lightake.com/image201212/sku_61821_1_small.jpg"
style="display: inline;">
</p>
<p style="height: 200px;">
<img width="140" height="140" alt="MK809 II TV Box Mini PC Android 4.1 Dual Core 1.6GHz Wifi Bluetooth 8GB"
src="images/Loading.gif" data-url="http://img.lightake.com/image201212/sku_61821_1_small.jpg"
style="display: inline;">
</p>
<p style="height: 200px;">
<img width="140" height="140" alt="MK809 II TV Box Mini PC Android 4.1 Dual Core 1.6GHz Wifi Bluetooth 8GB"
src="images/Loading.gif" data-url="http://img.lightake.com/image201212/sku_61821_1_small.jpg"
style="display: inline;">
</p>
<p style="height: 200px;">
<img width="140" height="140" alt="MK809 II TV Box Mini PC Android 4.1 Dual Core 1.6GHz Wifi Bluetooth 8GB"
src="images/Loading.gif" data-url="http://img.lightake.com/image201212/sku_61821_1_small.jpg"
style="display: inline;">
</p>
<p style="height: 200px;">
<img width="140" height="140" alt="MK809 II TV Box Mini PC Android 4.1 Dual Core 1.6GHz Wifi Bluetooth 8GB"
src="images/Loading.gif" data-url="http://img.lightake.com/image201212/sku_61821_1_small.jpg"
style="display: inline;">
</p>
<p style="height: 200px;">
<img width="140" height="140" alt="MK809 II TV Box Mini PC Android 4.1 Dual Core 1.6GHz Wifi Bluetooth 8GB"
src="images/Loading.gif" data-url="http://img.vesst.com/170x240/WE/WE0772/WE0772B.jpg"
style="display: inline;">
</p>
<p style="height: 200px;">
<img width="140" height="140" alt="MK809 II TV Box Mini PC Android 4.1 Dual Core 1.6GHz Wifi Bluetooth 8GB"
src="images/Loading.gif" data-url="http://img.vesst.com/170x240/WN/WN0322/WN0322W.jpg"
style="display: inline;">
</p>
<p style="height: 200px;">
<img width="140" height="140" alt="MK809 II TV Box Mini PC Android 4.1 Dual Core 1.6GHz Wifi Bluetooth 8GB"
src="images/Loading.gif" data-url="http://img.vesst.com/170x240/WA/WA0592/WA0592S.jpg"
style="display: inline;">
</p>
</body>
</html>
[code=javascript]
jQuery.easing['jswing'] = jQuery.easing['swing'];
网 上下载的一个做了一些修改。
jQuery.extend( jQuery.easing,
{
def: 'easeOutQuad',
swing: function (x, t, b, c, d) {
//alert(jQuery.easing.default);
return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
},
easeInQuad: function (x, t, b, c, d) {
return c*(t/=d)*t + b;
},
easeOutQuad: function (x, t, b, c, d) {
return -c *(t/=d)*(t-2) + b;
},
easeInOutQuad: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t + b;
return -c/2 * ((--t)*(t-2) - 1) + b;
},
easeInCubic: function (x, t, b, c, d) {
return c*(t/=d)*t*t + b;
},
easeOutCubic: function (x, t, b, c, d) {
return c*((t=t/d-1)*t*t + 1) + b;
},
easeInOutCubic: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t*t + b;
return c/2*((t-=2)*t*t + 2) + b;
},
easeInQuart: function (x, t, b, c, d) {
return c*(t/=d)*t*t*t + b;
},
easeOutQuart: function (x, t, b, c, d) {
return -c * ((t=t/d-1)*t*t*t - 1) + b;
},
easeInOutQuart: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
return -c/2 * ((t-=2)*t*t*t - 2) + b;
},
easeInQuint: function (x, t, b, c, d) {
return c*(t/=d)*t*t*t*t + b;
},
easeOutQuint: function (x, t, b, c, d) {
return c*((t=t/d-1)*t*t*t*t + 1) + b;
},
easeInOutQuint: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
return c/2*((t-=2)*t*t*t*t + 2) + b;
},
easeInSine: function (x, t, b, c, d) {
return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
},
easeOutSine: function (x, t, b, c, d) {
return c * Math.sin(t/d * (Math.PI/2)) + b;
},
easeInOutSine: function (x, t, b, c, d) {
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
},
easeInExpo: function (x, t, b, c, d) {
return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
},
easeOutExpo: function (x, t, b, c, d) {
return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
},
easeInOutExpo: function (x, t, b, c, d) {
if (t==0) return b;
if (t==d) return b+c;
if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
},
easeInCirc: function (x, t, b, c, d) {
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
},
easeOutCirc: function (x, t, b, c, d) {
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
},
easeInOutCirc: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
},
easeInElastic: function (x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
},
easeOutElastic: function (x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
},
easeInOutElastic: function (x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5);
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
},
easeInBack: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c*(t/=d)*t*((s+1)*t - s) + b;
},
easeOutBack: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
},
easeInOutBack: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
},
easeInBounce: function (x, t, b, c, d) {
return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
},
easeOutBounce: function (x, t, b, c, d) {
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
} else {
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
},
easeInOutBounce: function (x, t, b, c, d) {
if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
}
});
[/code]
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<div style="height:2000px;">
<div id="menu" style="border:1px solid black;width:180px;height:100px;background:yellow;position:fixed;left:30px;top:200px;">
<ul>
<li>menu1</li><li>menu2</li><li>menu3</li><li>menu4</li>
</ul>
</div>
</div></body>
</html>