Question

嗨所以我做了一个侧边栏并使用了一些javascript来自动更新其相对于其父级的宽度但是现在我想在窗口低于750px时完全自动删除词缀（我认为是平板电脑断点）自举）。

我在另一个页面上找到了这个代码，但是我无法在我的页面上工作（顺便说一下，我对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 Affix，因此删除该功能的一种方法是删除属性data-spy。由于您希望观察.container的宽度，因此可以使用positionSidebar函数调用setInterval函数。它会创建一个在特定时间间隔（以毫秒为单位）后触发的循环：

＆＃13;

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

＆＃13;

哦，我需要警告你，这是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”。

在移动设备上停用词缀

2 个答案: