スクロールダウン中のスクロール位置 - jquery

ページの下部に隠れたフライヤー（要素）があります。ユーザーがページの内容の70％に達するまで下にスクロールすると、その要素が表示されます。 jqueryでこれをどのように達成できますか？スクロールダウン中のスクロール位置 - jquery

おかげで、 L

2011-01-12 lshettyl

はまだ完璧な...これを試していない与えるが、あなたの出発点を与える必要があります...

<!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>

出典

2011-01-12 14:54:56

+1、栄光。そして、誰かが作業コピー（ある場所でDIVを保持するために少し変更されている）を望む場合、あなたはここを見ることができます：http://www.jsfiddle.net/bradchristie/7EKAH/1/ –

aw！おかげでジミーは、うまくいきました。 – lshettyl

スクロールダウン中のスクロール位置 - jquery

答えて

関連する問題