Deatching doesn't work correctly when window scroll position is not top / "stickyness" is active

[aproc]

Hello,
I'm working on a responsive website with a horizontal navbar that should be fixed positioned / sticky if the user scrolls down, but only for windows with a certain width (e.g. wider than 601px). If the screen width changes below this threshold (e.g. lower than 600px) the "stickness" should be removed. When changing back to a wider width it should be re-added again and so on ...

Everything works fine as long as the scroll position is top (or the stickynes is not already triggered) when the window width change happens.

Otherwise, for example when you have scrolled down a little and change the window with afterwards (which calls the detach method) the complete navbar gets removed from the DOM.

I've created a fiddle to explain the problem: http://jsfiddle.net/4msAr/4/

Example:

• Start with window/iframe width at "desktop width" (aka wider than 601px)
• Scroll down a little until sticky-kit makes the navbar sticky
• Change the window/iframe width to "mobile width" (aka lower than 600px)

Bugs happen:

• The complete navbar gets removed
• Sometimes the spacer container remains

Did I understand something wrong? I expected the detach method to remove the spacer container and removing the inline-styles on the sticky-target / navbar.

Here's the actual code (which I also used for the fiddle):

/* EXAMPLE */
$(function() {

function mNavSticky_addNavStickyLogic() {
    // if is already initialized
    if( $("#navbar").data("sticky_kit") ) {

        $(document.body).trigger("sticky_kit:recalc");
    }
    // else is not initialized yet
    else {
         // init sticky-kit for navbar
        $("#navbar").stick_in_parent();
    }
}

function mNavSticky_removeNavStickyLogic() {
    // if is already initialized
    if( $("#navbar").data("sticky_kit") ) {
        // destroy sticky-kit for navbar
        $("#navbar").trigger("sticky_kit:detach");
    }
}

function NavSticky_WidthChange(mq) {
    // if window is wider than mobile
    if ( mq.matches ) {

        mNavSticky_addNavStickyLogic();
    }
    // if window is mobile (smaller than desktop)
    else {

        mNavSticky_removeNavStickyLogic();
    }
}

function NavSticky_AddMQListener() {

    var mq_min_desktop  = window.matchMedia("screen and (min-width: 601px)");

    mq_min_desktop.addListener(NavSticky_WidthChange);

    // Initial check for current Media Query State / Window Width
    NavSticky_WidthChange(mq_min_desktop);
}

// INIT
NavSticky_AddMQListener();

});

[simonvart]

I already observed and I had make a version which works for this problem. Check on Closed Issues #23 #23

I could send you the modified file later, if you want.

[aproc]

@simonvart
Thanks a lot, that would be nice. But no need to hurry, I will not be able to test your files untill tomorrow. Do i need to configure anything special or is it just replacing the file(s)?

[simonvart]

I placed the modified file in a jsfiddle http://jsfiddle.net/z3y6B/

I initiated the file with :

jQuery('<yourelement>').stick_in_parent({
                        'inner_scrolling': false,
                        'no_recalc': true
});

and as I remove the recalculation on window resize from the plugin, I have to do it "manually" after the init :

jQuery( window ).on ( 'resize', function() {
    jQuery(document.body).trigger("sticky_kit:recalc");
});

If you have any issue it would be more convienient to talk outside of github.

[aproc]

Nice one! Now everything works. Thanks a lot.

[simonvart]

Good to know ! You're welcome.

[jme783]

This is a great fix, was struggling with this for hours. @simonvart you should definitely submit this as a pull request to improve this plugin.

[simonvart]

Thanks, I will consider to create a fork, merge my modification and ask for a pull request.