在移动设备上禁用 Affix

Question

你好，所以我制作了一个侧边栏并使用了一些 java 脚本来自动更新其相对于其父级的宽度，但现在我想在 window 消失时完全自动删除词缀低于 750px（我认为这是 bootstrap 中的平板电脑断点）。

我在另一个页面上找到了这段代码，但我无法在我的页面上使用它（顺便说一句，我对 java 编码不是很了解）

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

这是我的网站

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

抱歉，有点乱，有人可以告诉我我做错了什么吗？贴东西原来是噩梦哈哈

Answer 1

更新

由于您使用的是 Bootstrap 词缀，删除该功能的一种方法是删除属性 data-spy。而既然要观察.container的宽度，可以用setInterval函数调用positionSidebar函数。它创建一个循环，它在特定时间间隔（以毫秒为单位）后触发：

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

setInterval(positionSidebar, 300);

哦，我需要警告你，这是 Javascript，它是一种不同于 Java 的编程语言。注意不要滥用名称。

Answer 2

我今天遇到了这个问题。我需要在小于 1000 像素的屏幕上禁用词缀，我想出了这个解决方案。希望对其他人有所帮助

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

我使用了 Bootstrap 附加事件 "affixed.bs.affix"，它在将固定定位添加到元素后触发。您还可以使用 "affix.bs.affix"，它在固定定位添加到元素之前触发。

在移动设备上禁用 Affix

Disable Affix on mobile devices

javascript

java

html

twitter-bootstrap

affix