Question

I’m trying to make a sidebar menu sticky or not sticky based on page width using the code below. Basically, “unstick” should be false if the window is over 768 pixels wide, or true when it is less than 768px. It should also update if the user resizes the page.

It works properly on the initial page load, but not always when resizing. If the page starts > 768, and is reduced, unstick changes from false to true, like I want it to; but then it gets stuck that way, and won’t change back if the page is enlarged.

If the page starts out <768, unstick starts out set to true, like I want, but resizing the page doesn’t change anything — it always stays true.

Is there something wrong with my conditional?

$(function(){
  $(window).resize(function(){
     if($(this).width() >= 768){
         jQuery('#info').containedStickyScroll({
             duration: 0,
             unstick: false
         });
     } else {
         jQuery('#info').containedStickyScroll({
             duration: 0,
             unstick: true
         });
     }
  })
  .resize();//trigger resize on page load
});

Answer 1

Looks like your plugin was not removing it’s old events/dom elements. Each time you are calling .containedStickyScroll, it is keeping some of the previous options.

Here’s what I did to fix it:

$(function(){
    $(window).resize(function(){
        if($(this).width() >= 768){
            jQuery('#info').containedStickyScroll({
                duration: 0,
                unstick: false
             });
             $(".scrollFixIt").remove();
             $(window).unbind("scroll");
         } else {
             jQuery('#info').containedStickyScroll({
                 duration: 0,
                 unstick: true
             });
         }
    })
    .resize();//trigger resize on page load
});

Hope this helps.