三种方法实现智能浮动

2013-01-18阅读(4722)评论(0)牵着狗狗看MM

苏州实时公交查询

方法一:

<script type="text/javascript">
       $(function() {
           var offset = $("#text-3").offset();
           var topPadding = 15;
           $(window).scroll(function() {
               if ($(window).scrollTop() > offset.top) {
                   $("#text-3").stop().animate({
                       marginTop: $(window).scrollTop() - offset.top + topPadding
                   });
               } else {
                   $("#text-3").stop().animate({
                       marginTop: 0
                   });
               };
           });
       });
   </script>

方法二:jQuery方式

$.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) { //如果滚动到页面超出了当前元素element的相对页面顶部的高度
				if (window.XMLHttpRequest) { //如果不是ie6
					element.css({
						position: "fixed",
						top: 0
					}).addClass("shadow");	
				} else { //如果是ie6
					element.css({
						top: scrolls
					});	
				}
			}else {
				element.css({
					position: pos,
					top: top
				}).removeClass("shadow");	
			}
		});
	};
	return $(this).each(function() {
		position($(this));						 
	});
};
$(function(){
	$(".wrapper-nav").smartFloat();
});

方法三:MooTools方式

var $smartFloat = function(elements) {
    var position = function(element) {
        var top = element.getPosition().y, pos = element.getStyle("position");
        window.addEvent("scroll", function() {
            var scrolls = this.getScroll().y;
            if (scrolls > top) {
                if (window.XMLHttpRequest) {
                    element.setStyles({
                        position: "fixed",
                        top: 0
                    });
                } else {
                    element.setStyles({
                        top: scrolls
                    });
                }
            }else {
                element.setStyles({
                    position: "absolute",
                    top: top
                });
            }
        });
    };
    if ($type(elements) === "array") {
        return elements.each(function(items) {
            position(items);
        });
    } else if ($type(elements) === "element") {
        position(elements);
    }
};
赞(0)
转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » 三种方法实现智能浮动
分享到: 更多 (0)