CODEWITHSUNDEEP
jqueryscroll
lshettyl
lshettyl

Reputation: 8181

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 want that element to show up. How can I achieve this in jquery?

Thanks, L

Upvotes: 0

Views: 2727

Answers (1)

Jimmy Chandra
Jimmy Chandra

Reputation: 6580

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>

Upvotes: 2

Related Questions