页面元素滚动跟随效果实现-优快云博客

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta>




























<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
 <meta>


<%--<script type="text/javascript">
    (function($) {
        $.fn.floatAutoScroll = function() {
            this.each(function() {
                var obj = $(this);
                var top = obj.css('top').replace('px', '');
                $(window).scroll(function() {
                    var scrollTop = $(window).scrollTop();
                    obj.stop().animate({ top: (top * 1 + scrollTop * 1) }, 'normal');
                });
            });
        }
    })(jQuery);
    $(function() {
        $('.float-container').floatAutoScroll();
    });
</script>
<style type="text/css">
.float-container { position:absolute; width:50px; height:50px;}
.float1 { top:360px; }
</style>--%>








<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
	<style type="text/css">
 
		.abs{ position: absolute;  right: 10px; border: solid 1px black;  width: 100px; height: 50px; top: 300px}
	</style>
</head>
<body>
 
	<div>
		<script type="text/javascript">
		    for (var i = 0; i < 1000; i++) {
		        document.write(i + "<br/>");
		    }
 
 
		</script>
 
	</div>
 
	<div class="abs">
 
	</div>
	<script type="text/javascript">

	    window.onscroll = function () {
	        // if (document.documentElement && document.documentElement.scrollTop) {
	        var top = document.documentElement.scrollTop || document.body.scrollTop;
	        top += 300;
	        $(".abs").stop(true, false).animate({ top: top + "px" }, 1000);


	    };
 
 		
	</script>
</body>
</html>

鼠标悬浮