Conditional on width

[brianrc]

Thank you for sharing this script.

I'm wondering how I can make it conditional on the width of the window? I don't want it active until the window width is greater than 767px. I'm not jQuery savvy, but I've tried the following without success.

Plugin.prototype.init = function () {
    var self = this;

    this.sidebar = this.root.find(this.options.sidebar);
    this.content = this.root.find(this.options.content);
    this.lastScrollTop = 0;

    if (this.canBeSticky() === true) { 
        if ($(window).width() > 767) {
            $(window).bind('scroll.sticky_sidebar', function () {
                self.setScrollDirection()
                    .setBoundaries()
                    .positionSidebar();
            });
        }
        else {
            $(window).unbind('scroll.sticky_sidebar');
            $('#sidebar-container').removeAttr( 'style' );
            $('#sidebar-container').addClass('stop');
        }
    }
};

[daviferreira]

Hey Brian,

you could try to modify the canBeSticky method with something like this:

Plugin.prototype.canBeSticky = function () {
    return this.sidebar.height() < this.content.height() &&
             this.sidebar.height() > $(window).height() &&
             $(window).width() > 767;
};

I will try to make it an configurable option, or you can send a pull request if you get it working!

Thanks!

[brianrc]

Thanks for the response, Davi.

I tried modifying the code as you describe, but unfortunately the script is still active when I resize down to a mobile size window. I've spent hours trying several different ways, but have had no luck turning it off.

Thanks again for any assistance you can give.

Brian

[brianrc]

Just to clarify. This works initially if you reload the browser in a small size or large size, but transitioning in between large and small (dragging the corner of the browser) the script still remains active.

[daviferreira]

Ok Brian, I need to add some support for window resizing. Will do that as soon as possible :)

[brianrc]

Wow, that would be great. I've tried so many different implementations of this, but yours is the best one I've found.

The other thing I'm doing which is a little hackish is adding the javascript-calculated width every time the browser is resized:

$(document).ready(function(){
var windowWidth, sidebarWidth;
function recalculate() {
        windowWidth = $(window).width();
        if ( windowWidth > 767) {
            sidebarWidth = $('#posts_sidebar').width();
            $('#sidebar-container').css( { 'width': sidebarWidth + 'px' });
        }
        else {
            $('#sidebar-container').removeAttr( 'style' );
        }
};    
recalculate();
$(window).resize(recalculate);
});

I do this because the a fixed sidebar needs to have a set size, but my template is responsive and works with percentages. The above workaround is the only way I could get it to work. div#posts_sidebar has the percentage width. div#sidebar-container is a child of it and what Sticky Sidebar latches on to.