Disable Affix on mobile devices

Question

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 below 750px (which I think is the tablet breakpoint in bootstrap).

I found this code on another page but I can't get it to work on my page (btw I don't have a great knowledge of java coding)

<script>
if ($(.container).first().innerWidth() > 750)
    $(#sidebar).affix({})
</script>

This is my site

    <div class="container">
                    <div class="row">
            <div class="col-sm-3">
                <div id="sidebar">
                    <div class="row">
                        <div class="about text-center page-header">
                            <img src="images/me.jpg" class="img-circle" width="100px">
                            <h3>Indiana Porter</h3>
                            <small>Subtitle</small>
                        </div>
                        <div class="posts page-header">
                            <h4 style="padding-left:15px;"><strong>Recent Posts</strong></h4>
                            <div id="posts">
                                <ul class="nav nav-tabs nav-stacked">
                                    <li class="active"><a href="#310320161" class="page-scroll">Back to the future day</a></li>
                                    <li><a href="#310320162" class="page-scroll">How about something spacey</a></li>
                                    <li><a href="#310320163" class="page-scroll">A little bit of compositing</a></li>
                                </ul>
                            </div>
                            <br>
                        </div>
                        <div class="col-md-12 text-center">
                            <button type="button" class="btn btn-default" data-toggle="modal" data-target="#feedback">Email me</button>
                        </div>
                    </div>
                </div>
            </div>



            <div class="col-sm-9">



                <div class="row" id="310320161">
                    <div class="col-md-12 page-header">
                        <p><img src="images/bttf.jpg" class="img-responsive"></p>
                        <h2>Back to the future day<br><small>31/01/2016</small></h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce laoreet lorem auctor risus interdum, a gravida ligula iaculis. Donec sodales leo et nunc fringilla, eu gravida tellus porttitor. Ut at lorem tortor. Pellentesque at magna leo. Nullam venenatis varius nisl, sed convallis mauris tempus eu. Sed feugiat dignissim convallis. Pellentesque at lobortis libero, sit amet placerat lacus. Praesent ut hendrerit magna.</p>
                        <h3>Files</h3>
                        <p><div class="well well-sm">
                            <div class="row text-center">
                                <a href="files/310320161/BTTF.aep"><div class="col-xs-3 col-sm-2"><h2><span class="glyphicon glyphicon-file" aria-hidden="true"></span></h2>BTTF.aep</div></a>
                                <a href="files/310320161/delorian.jpg"><div class="col-xs-3 col-sm-2"><h2><span class="glyphicon glyphicon-picture" aria-hidden="true"></span></h2>Delorian.jpg</div></a>
                                <a href=""><div class="col-xs-3 col-sm-2"><h2><span class="glyphicon glyphicon-folder-close" aria-hidden="true"></span></h2>BTTF.zip</div></a>
                            </div>
                        </div></p>
                    </div>
                </div>



                <div class="row" id="310320162">
                    <div class="col-md-12 page-header">
                    <p><img src="images/spacey.jpg" class="img-responsive"></p>
                        <h2>Post 2<br><small>31/01/2016</small></h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce laoreet lorem auctor risus interdum, a gravida ligula iaculis. Donec sodales leo et nunc fringilla, eu gravida tellus porttitor. Ut at lorem tortor. Pellentesque at magna leo. Nullam venenatis varius nisl, sed convallis mauris tempus eu. Sed feugiat dignissim convallis. Pellentesque at lobortis libero, sit amet placerat lacus. Praesent ut hendrerit magna.</p>
                    </div>
                </div>



                <div class="row" id="310320163">
                    <div class="col-md-12 page-header">
                    <p><img src="images/compositing.jpg" class="img-responsive"></p>
                        <h2>Post 3<br><small>31/01/2016</small></h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce laoreet lorem auctor risus interdum, a gravida ligula iaculis. Donec sodales leo et nunc fringilla, eu gravida tellus porttitor. Ut at lorem tortor. Pellentesque at magna leo. Nullam venenatis varius nisl, sed convallis mauris tempus eu. Sed feugiat dignissim convallis. Pellentesque at lobortis libero, sit amet placerat lacus. Praesent ut hendrerit magna.</p>
                    </div>
                </div>



            </div>

        </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script>
    $(function() {
    var $sidebar = $('div[data-spy="affix"]');
        resize = function() { $sidebar.width($sidebar.parent().width()); };
    $(window).resize(resize); 
   resize();
});
</script>
  </body>
</html>

Sorry It's a bit messy, could someone please tell me what I'm doing wrong. Affixing things is turning out to be a nightmare haha

Answer 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.

Answer 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.