CODEWITHSUNDEEP
javascriptjqueryresponsive-design
artmem
artmem

Reputation: 367

Issues with js conditional based on page width

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
});

Upvotes: 0

Views: 382

Answers (1)

steve
steve

Reputation: 381

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.

Upvotes: 1

Related Questions