Disable Affix On Mobile Devices

Hi so I've made a sidebar and have used some javascript to auto update its width relative to its parent but now I want to auto remove the affix completely whenever the window goes

Solution 1:

UPDATE

Since you're using the Bootstrap Affix, one way you can remove that functionality is by removing the attribute data-spy. And since you want to observe the width of .container, you can call the positionSidebar function with the setInterval function. It creates a loop that it's triggered after specific intervals of time (in miliseconds):

function positionSidebar() {
    if ($('.container').first().innerWidth() > 750) {
        $('#sidebar').affix({});
    } else {
        $('#sidebar').removeAttr('data-spy');
    }
}

setInterval(positionSidebar, 300);

Oh, I need to warn you that this is Javascript and it's a different programming language different from Java. Take care to not misuse the names.

Solution 2:

I faced this issue today. I needed to disable the affix on screens smaller than 1000px and I came up with this solution. I hope it will help others

 $("ElementWithAffixClass").on('affixed.bs.affix', function () {
          if($(window).width() < 999)
           {
             $(this).removeClass('affix');
             return;
           }
   }

I have used Bootstrap affix event "affixed.bs.affix" which fires after fixed positioning is added to the element. You can also use "affix.bs.affix" which fires before fixed positioning is added to the element.