Question

我在页面底部有一个隐藏的传单（元素）。当用户向下滚动到达页面内容的70％时，我希望该元素显示出来。我怎样才能在jquery中实现这个目标？

谢谢， →

Answer 1

尝试一下......还不完美，但是应该给你一个起点...

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

滚动向下滚动位置 - jquery

1 个答案: