theroux/clingify

A very flexible jQuery plugin for sticky page elements

clingify's Issues

add options for directionality

ie nav disappears when scrolling down, re-appears when scrolling up.

scrolling up implies user may want to revisit navigation. i think chrome for iOS does this.

Un-cling once you scroll past nav's parent container

Basically I'd just like for the sticky element to unstick once you scroll past the end of the parent container. In other words, if I have two long sections of content, I'd only like for the sticky element to stick to the first section.

I thought that something like below would stick the element only to the specified parent container:

$(function() {
    $('.stickit').clingify({
        placeholderClass: 'gallery-menu-container',
        breakpointWidth: 830,
        locked : function() {
                  matchOffset($navBar, $navParent);
              }
      });
  });

Add ontouch event for iOS safari

onscroll only fires at the end of scrolling on iPhone/iPad, which makes the UI look laggy

Manual function to refresh position of the sticky element / problem with bootstrap tabs

Hey! Is there a way to call a function of the clingfy plugin to refresh the position of the stick element?

The reason is the following problem with the bootstrap tabs: if I switch between the tabs without scrolling, clingify works fine. Here a screenshot:

But if I scroll and then switch the tabs, the sticky element jumps to the top. If I now scroll a bit, it jumps back to its actual position:

Therefore I thought that the easiest way is to call a function after switching the tab which refresh the position of the stick element.

Add public destroy method

"Contain" within a div

Love the plugin. I want to be able to add a container (or bind to that container width/position) at least. So my sticky header can be within a boxed layout. ;)

Let me know if this is possible. Thanks.

Test in IE8

Yeah I know.