sticky-state

sticky-state copied to clipboard

Tested in Chrome, Firefox and IE, when a page has content added dynamically on scrolling, the sticky element changes its stuck point, that to say if the element is supposed to stuck when it reaches top, it won't happen until you keep scrolling down at a certain distance which the distance is height of the dynamically added content.

Please fix this issue, thanks!

About title change:

It seems it's the expected behavior for an element stay on top at the beginning, so the real issue is the sticky element changes the point of when to stuck.

@kamiyeye you could try to force state change after page content(height) has been changed.

Something like myStickyHeader = StickyState.apply(stickyElement); ...

function forceStateUpdate) {
  for (var i = 0, l = myStickyHeader.items.length; i < l; i++) {
    var values = myStickyHeader.items[i].getStickyState();
    values = $.extend({}, values, myStickyHeader.items[i].getBounds());
    myStickyHeader.items[i].setState(values);
  }}

that's might be because of getBounds wasn't called on content height change

I have changed my JS code back to before

    $(window).scroll(function() {
        var y = $(this).scrollTop();
        if (y > 0) {
            header.addClass('fixed');
        } else {
            header.removeClass('fixed');
        }
    });

but added a line in CSS for fixed header

.fixed {
  position:fixed;
  position:sticky;
}

this works in all major browsers and page height doesn't matter. I think Stickystate is decent for elements sit in somewhere middle of a page, but not the best for sticky header.