当前位置: 编程技术>jquery
Jquery 右侧浮动菜单的简单代码
来源: 互联网 发布时间：2014-09-03
本文导语: 使用Jquery动画函数的animate方法，实现了一个简单的右侧浮动菜单。 原理： 当滚动条滚动时，让其运行一个方法；然后，在那个方法中简单的计算下动画元素的top。 计算方法：window的高度-元素的高度，再除以2，即让元素在...
使用Jquery动画函数的animate方法，实现了一个简单的右侧浮动菜单。
原理：
当滚动条滚动时，让其运行一个方法；然后，在那个方法中简单的计算下动画元素的top。
计算方法：window的高度-元素的高度，再除以2，即让元素在页面上居中，然后在加上元素滚动的高度，就可以了。
完整代码：
代码示例:
Jquery 右侧浮动菜单-www.
.test{ height:8400px;}
.float{ width:103px; height:213px; background: url(/blog_article/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 右侧浮动菜单就实现了，希望对初学的朋友有些许的启发吧，对大家有帮助是脚本学堂的编辑人员最开心的。
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术，将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。