【转】仿淘宝智能跟随菜单提示栏智能浮动的菜单

最新推荐文章于 2024-02-13 16:09:16 发布

原创最新推荐文章于 2024-02-13 16:09:16 发布 · 160 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html #JavaScript #Ajax #ViewUI

Javascript 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的元素固定悬浮效果。当页面滚动到特定位置时，指定元素会固定在屏幕顶部，当页面再次滚动回到原来位置时，元素则恢复原有位置。文章通过JavaScript代码展示了这一功能的具体实现过程。

转自：http://guangqiang.iteye.com/blog/1699940


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript"> 
$.fn.smartFloat = function() {
    var position = function(element) {
        var top = element.position().top, pos = element.css("position");
	$(window).scroll(function() {
            var scrolls = $(this).scrollTop();
            if (scrolls > top) {
		if (window.XMLHttpRequest) {
		    element.css({position: "fixed",top: 0});
		} else {
		    element.css({top: scrolls});	
		}
	    }else {
		element.css({position: pos, top: top});	
            }
        });
    };
    return $(this).each(function() {
	position($(this));						 
    });
};
</script>
<script>
//绑定
$(document).ready(function(){
    $("#nav_left_layout").smartFloat();
});