jQuery.panelSnap

A jQuery plugin that, after scrolling, snaps to blocks of content which I like to call panels. You can actually nest sets of panels as you will see throughout this demo page.

Each following panel will explain a specific feature of the panelSnap plugin.

(Scroll down to see more.)

The basic setup

<html>
  <head>
    <script src="/path/to/jquery.js"></script>
    <script src="/path/to/jquery.customEvents.js"></script>
    <script src="/path/to/jquery.panelSnap.js"></script>
    <script>
      $('body').panelSnap();
    </script>
  </head>
  <body>
    <section>
      ...
    </section>
    <section>
      ...
    </section>
    <section>
      ...
    </section>
  </body>
</html>

Configuration options

<script>
  var options = {
    $menu: false,
    menuSelector: 'a',
    panelSelector: 'section',
    namespace: '.panelSnap',
    onSnapStart: function(){},
    onSnapFinish: function(){},
    directionThreshold: 50,
    slideSpeed: 200
  };

  $('.panel_container').panelSnap(options);
</script>

Connected menu

First

Second

Third

Callback functions

First

Second

Third

Log:

Event capturing

First

Second

Third

Log:

适用浏览器：FireFox、Chrome、Safari、Opera、傲游、搜狗. 不支持IE8、360、世界之窗。

代码整理：站长图库