search

bbarakaci / fixto

A jQuery plugin for sticky positioning
MIT License
217 stars 57 forks source link

Responsive turn off at width #17

Closed robertdwolf closed 10 years ago

robertdwolf commented 10 years ago

Is there a way to turn off fixto when window is resized to a shorter width, then turn it back on when resized back to larger width again?

This is what I'm trying:

if (windowWidth > 991) {
    $('.left').fixTo(fixContain,{top:20,useNativeSticky:false});
}

if (windowWidth < 991) {
    $('.left').fixTo('stop');
}
bbarakaci commented 10 years ago

don't reinitialize. if you use 'stop', restart it with using 'start'. separate the initialization and run once.

you can use destroy then reinitialize though.

robertdwolf commented 10 years ago

I'm almost there just one problem, the sticky works but the top amount is getting ignored? I'm not sure what I'm doing wrong.

Here's my modified code:

var stickySubNav = function(){ var windowWidth = $(window).width();

if (windowWidth > 400) {
    //fix
    $('.csticky').fixTo('start','.csticky-holder',{top:40,useNativeSticky:false});
} else {
    //unfix
    $('.csticky').fixTo('stop','.csticky-holder',{top:40,useNativeSticky:false});
}

};

stickySubNav();

$(window).resize(function(){ stickySubNav(); });

bbarakaci commented 10 years ago

Syntax is not correct. 'Start' and 'stop' is not meant to use like that. Please see the examples.

robertdwolf commented 10 years ago

Ok I got it now:

var instance = $('.csticky').fixTo('.csticky-holder',{top:40,useNativeSticky:false}); var stickySubNav = function(){ var windowWidth = $(window).width(); if (windowWidth > 400) { //fix instance.fixTo('start'); } else { //unfix instance.fixTo('stop'); } };

stickySubNav();

$(window).resize(function(){ stickySubNav(); });

Thanks for the help and the cool plugin!

bbarakaci commented 10 years ago

I didn't help much. I am glad it worked out for you. Cheers.