title: How to make fixed elements hide on scroll and then appear when the user is not scrolling
body: <p>I have a hidden element that gets <code>display: block;</code> when the user has scrolled a certain amount of pixels and hides when the user has reached a certain point of the page. This works fine on desktop computers and laptops. But the problem is tablets. I have a iPad 2 and a Samsung Galaxy Tab4. That fixed element causes the scrolling on both tablets to be laggy. I have made a JavaScript function that hides the element when you are scrolling and shows it again when you are not scrolling. It works, but is really slow. When you start scrolling it hides the element when you release your finger from the screen. It just doesn't work quite that well.</p>
  
  <p>Here is the code:</p>
  
  <pre><code>function hideElementsOnScroll() {
      var body = $("body");
  
      if(body.hasClass("ipad") || body.hasClass("tablet-chrome")) {
          $(window).scroll(function() {
              var windowTop = $(window).scrollTop();
              var offsetTop = $("#sd-tabs").offset().top;
  
              if(windowTop &gt;= offsetTop &amp;&amp; $(".scroll-tabs").hasClass("stickyTabs")) {
                  $(window).scroll($.debounce( 0, true, function() {
                      $(".scroll-tabs").css("visibility", "hidden");
                  }));
                  $(window).scroll($.debounce( 100, function() {
                      $(".scroll-tabs").css("visibility", "visible");
                  }));
              } else {
                  if(windowTop &lt; offsetTop) {
                      $(".scroll-tabs").css("visibility", "hidden");
                      $(window).scroll($.debounce( 1, true, function() {
                          $(".scroll-tabs").css("visibility", "hidden");
                      }));
                      $(window).scroll($.debounce( 1, function() {
                          $(".scroll-tabs").css("visibility", "hidden");
                      }));
                  }
              }
          });
      }
  }
  </code></pre>
  
  <p>Is there a plugin that does this? Or do I need to edit my function?</p>