scroll position while scrolling down - jquery
I have a hidden flyer (element) at the bottom of the page. When user scrolls down to reaches 70% of the page content I wan开发者_如何转开发t that element to show up. How can I achieve this in jquery?
Thanks, L
Give this a try... not perfect yet, but should give you a starting place...
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
.flyer {
top:0px; height:0px;
width:300px;
height:100px;
background-color:#ffc;
border:solid 1px #000;
position:absolute;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
</head>
<body>
<div class="container">
</div>
<div class="flyer"></div>
</body>
<script type="text/javascript">
$(function() {
$(".flyer").fadeOut(0);
for (var i = 0; i < 500; i++) {
$("<div class=\"item\">Line " + i +"</div>").appendTo($(".container"));
}
$(window).scroll(function(e) {
var dh = $(document).height();
var sh = $(this).scrollTop();
if (sh / dh > 0.70) {
$(".flyer").offset({left:0,top:sh + 20}).fadeIn("fast");
} else {
$(".flyer").fadeOut("fast");
}
});
});
</script>
</html>
加载中,请稍侯......
精彩评论