Html:
<html>
<head>
<title>Scrolling</title>
<style>
.container{
position: relative;
margin: 0 auto;
width: 1000px;
<head>
<title>Scrolling</title>
<style>
.container{
position: relative;
margin: 0 auto;
width: 1000px;
height: 2000px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div class="container"></div>
</body>
</html>
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div class="container"></div>
</body>
</html>
Jquery:
$(function(){
$('html').append(
'<div id="ban_left" class="ban_scroll">CONTENT BANNER LEFT </div>',
'<div id="ban_right" class="ban_scroll">CONTENT BANNER RIGHT</div>'
);
$(window).scroll(function(){
var $toado_old=0;
var $toado_curr=$(window).scrollTop();
$('.ban_scroll').stop().animate({'top':$toado_curr-$toado_old+50},400);//TOP 100px
$toado_old=$toado_curr;
});
$('html').append(
'<div id="ban_left" class="ban_scroll">CONTENT BANNER LEFT </div>',
'<div id="ban_right" class="ban_scroll">CONTENT BANNER RIGHT</div>'
);
$(window).scroll(function(){
var $toado_old=0;
var $toado_curr=$(window).scrollTop();
$('.ban_scroll').stop().animate({'top':$toado_curr-$toado_old+50},400);//TOP 100px
$toado_old=$toado_curr;
});
});
Css:
div#ban_left {
left: 1px;
}
div#ban_right {
right: 1px;
}
div.ban_scroll {
width: 100px;
height: 300px;
position: absolute;
top: 50px;
background: #ff0;
z-index: -1;
cursor: pointer;
}
0 comments:
Post a Comment