2011-01-12 62 views
0

我在頁面底部有一個隱藏的傳單(元素)。當用戶向下滾動到達到頁面內容的70%時,我希望該元素顯示出來。我如何在jQuery中實現這一點?向下滾動時的滾動位置 - jquery

感謝, 大號

回答

2

這給一個嘗試...還不完善,但應該給你一個起點......

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

+1,聲望。如果有人想要一個工作副本(有點修改,以保持DIV在一個位置),你可以看看這裏:http://www.jsfiddle.net/bradchristie/7EKAH/1/ – 2011-01-12 15:42:44