Home>

First, js code:

<script type="text/javascript">
  $.fn.smartfloat=function () {
    var position=function (element) {
      var top=element.position (). top, pos=element.css ("position");
      $(window) .scroll (function () {
        var scrolls=$(this) .scrolltop ();
        if (scrolls⊤top) {
          if (window.xmlhttprequest) {
            element.css ({
              position:"fixed",              top:0
            });
          } else {
            element.css ({
              top:scrolls
            });
          }
        } else {
          element.css ({
            position:pos,            top:top
          });
        }
      });
    };
    return $(this) .each (function () {
      position ($(this));
    });
  };
  //binding
  $("#float"). smartfloat ();
</script>

Second, html code:

<div>
  I am the area hovering when pinned</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
  • Previous AngularJS basic ng-include directive simple example
  • Next MySQL improves paging efficiency