<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>kiran</title>
<style>
body{margin:0; padding:0; height:1200px;}
.main{position:absolute; height:50px; width:100%; background:#f00; bottom:0;}
</style>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
$(document).on("ready",function(){
$(".main").css({"opacity":0});
$(window).scroll(function () {
if ($(this).scrollTop()) {
$(".main").animate({"opacity":1});
} else {
$('.main').animate({"opacity":0});
}
});
});
</script>
</head>
<body>
<div class="main"></div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>kiran</title>
<style>
body{margin:0; padding:0; height:1200px;}
.main{position:absolute; height:50px; width:100%; background:#f00; bottom:0;}
</style>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
$(document).on("ready",function(){
$(".main").css({"opacity":0});
$(window).scroll(function () {
if ($(this).scrollTop()) {
$(".main").animate({"opacity":1});
} else {
$('.main').animate({"opacity":0});
}
});
});
</script>
</head>
<body>
<div class="main"></div>
</body>
</html>
No comments:
Post a Comment