浮动菜单html,Jquery 右侧浮动菜单的简单代码

使用jquery动画函数的animate方法，实现了一个简单的右侧浮动菜单。

原理：

当滚动条滚动时，让其运行一个方法；然后，在那个方法中简单的计算下动画元素的top。

计算方法：window的高度-元素的高度，再除以2，即让元素在页面上居中，然后在加上元素滚动的高度，就可以了。

完整代码：

复制代码 代码示例:

Jquery 右侧浮动菜单-www.jbxue.com

.test{ height:8400px;}

.float{ width:103px; height:213px; background: url(images/float.png) no-repeat; overflow:hidden; position:absolute; right:10px; top:100px;}

aaaa

$(function(){

$(document).css({position : "relative"})

$(".float").css({position : "absolute",top : "100px",right : "10px"})

$(window).scroll(function(){

rightScroll();

})

function rightScroll(){

var wH = $(window).height(),

eH = $(".float").height(),

sH = $(window).scrollTop();

$(".float").animate({top : (wH-eH)/2+sH},{ queue: false, duration: 900 });

}

})

代码说明：

当窗口一加载时，让当前文档有一个相对定位，那么浮动元素相对文档而言，就是绝对定位的。

因此，无论窗口缩小还是移动窗口，我们的浮动元素都不会改变位置了。

就是这些了，一个简单的jquery 右侧浮动菜单就实现了，希望对初学的朋友有些许的启发吧，对大家有帮助是脚本学堂的编辑人员最开心的。