test/html/pushpin.html - v1-dev - githubmirror/materialize

test/html/pushpin.html
121 строка3 KB
Chang Alan
added pushpin test file
18 окт 2016, 05:16
18 окт 2016, 05:16de2be38
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
    <title>Documentation - Materialize</title>
    <!-- CSS  -->
    <link href="../../../bin/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
  </head>
  <body>
  <br><br><br><br>
    <nav>
      <div class="nav-wrapper">
        <a href="#" class="brand-logo">Dynamic Top and Bottom at 500px</a>
        <ul id="nav-mobile" class="right hide-on-med-and-down">
          <li><a id="removePushPin" class="waves-effect waves-light btn">Remove PushPin</a></li>
          <li><a id="topTo200" class="waves-effect waves-light btn">Change Top to 200px</a></li>
          <li><a id="bottomTo200" class="waves-effect waves-light btn">Change Bottom to 200px</a></li>
        </ul>
      </div>
    </nav>

    scroll<br>
    scroll<br>
    scroll<br>
    scroll<br>
    scroll<br>
    scroll<br>
    scroll<br>
    scroll<br>
    scroll<br>
    scroll<br>
    scroll<br>
    scroll<br>
    scroll<br>
    scroll<br>
    scroll<br>
    scroll<br>
    scroll<br>
    scroll<br>
    scroll<br>
    scroll<br>
    scroll<br>
    scroll<br>
    scroll<br>
    scroll<br>
    scroll<br>
    scroll<br>
    scroll<br>
    scroll<br>
    scroll<br>
    scroll<br>
    scroll<br>
    scroll<br>
    scroll<br>
    scroll<br>
    scroll<br>
    scroll<br>
    scroll<br>
    scroll<br>
    scroll<br>
    scroll<br>
    scroll<br>
    scroll<br>
    scroll<br>
    scroll<br>
    scroll<br>
    scroll<br>
    scroll<br>
    scroll<br>
    scroll<br>
    scroll<br>
    scroll<br>
    scroll<br>
    scroll<br>
    scroll<br>
    scroll<br>
    scroll<br>
    scroll<br>
    scroll<br>
    scroll<br>
    scroll<br>

    <div class="stats" style="position: fixed; top: 50%; left: 50%; width: 100px; margin-left: -50px;">
      <strong>scrollTop:&nbsp;</strong><span id="scrollTop">0</span>
    </div>

    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="../../../bin/materialize.js"></script>

    <script type="text/javascript">
      $( document ).ready(function() {
        $('nav').pushpin({
          top: $('nav').offset().top,
          bottom: 500
        });

        $(window).on('scroll', function() {
          $('#scrollTop').text($(window).scrollTop());
        });

        $('#removePushPin').on('click', function() {
          $('nav').pushpin('remove');
        });

        $('#bottomTo200').on('click', function() {
          $('nav').pushpin({
            bottom: 200
          });
        });

        $('#topTo200').on('click', function() {
          $('nav').pushpin({
            top: 200
          });
        });
      });

    </script>
  </body>
</html>