Home/ Questions/Q 3693796
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T04:25:10+00:00

I have a hidden flyer (element) at the bottom of the page. When user

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0