Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
A jQuery plugin for 'locking' short content in place as the user scrolls by longer content.
JavaScript CoffeeScript
Branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
dist
example Renamed example.
lib fix grunt watch
spec fix: correctly handle left column being longest column
src fix poplockit when scrolling past a feed item with a short and a long…
.gitignore
.travis.yml only node 0.8
CHANGELOG.md fix poplockit when scrolling past a feed item with a short and a long…
LICENSE-MIT Added CHANGELOG, fixed links, demo and README updates.
README.md update link to gh-pages for this project
grunt.js updating filenames after changing package config for jquery plugin repo
package.json fix poplockit when scrolling past a feed item with a short and a long…
poplockit.gif smoother and smaller gif
poplockit.jquery.json

README.md

build status

jQuery.popLockIt

A jQuery plugin for 'locking' short content in place as the user scrolls by longer content. For example, it will lock metadata and share buttons in place as the user scrolls by a long essay or series of images.

Demos

For documentation, usage and examples please see http://zamiang.github.io/jquery.poplockit.

Note how the kitten stays as you scroll through the body of the post https://raw.github.com/zamiang/jquery.poplockit/master/poplockit.gif

Usage

Download the minified version or the development version.

Include required Javascripts

<script src="jquery.js"></script>
<script src="dist/poplockit.min.js"></script>

Create html like this

  <div id="feed">
    <article>
      <div class="column">Left</div>
      <div class="column">Center</div>
      <div class="column">Right</div>
    </article>
    ...
  </div>

Apply the popLockIt plugin

$('#feed').popLockIt({
  feedItems      : $('#feed > article'),
  columnSelector : '> .column'
});

Contributing

Contributions and pull requests are very welcome. Please follow these guidelines when submitting new code.

Modifying the code

  1. Fork and clone the repo.
  2. If needed: npm install -g grunt for Grunt
  3. If needed: brew install phantomjs for PhantomJS
  4. Run npm install to install dependencies
  5. Run grunt (compiles coffeescripts and runs tests)
  6. Run grunt watch while editing files to auto-compile coffeescripts and run tests
  7. Make all changes in Coffeescript files, not JavaScript files.

Submitting pull requests

  1. Add tests for the change you want to make. Run grunt jasmine to see if tests fail.
  2. Run grunt to compile new dist and make sure nothing is broken
  3. Submit a Pull Request using GitHub.
Something went wrong with that request. Please try again.