在移动设备上禁用词缀 [英] Disable Affix on mobile devices
问题描述
所以我做了一个侧边栏，并使用了一些JavaScript来自动更新其相对于其父级的宽度，但是现在我想在窗口低于750px（我认为这是平板电脑的断点）时完全自动删除词缀
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).
我在另一页上找到了此代码，但是我无法在我的页面上使用它（顺便说一句，我对Java编码的了解不多）
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>
这是我的网站
<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
推荐答案
更新
由于使用的是Bootstrap Affix，因此删除该功能的一种方法是删除属性 data-spy 。而且，由于您要观察 .container 的宽度，因此可以使用<$ c $调用 positionSidebar 函数c> setInterval 函数。它会创建一个循环，在特定时间间隔（以毫秒为单位）后触发该循环：
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);
哦，我需要提醒您这是Javascript，它是与Java不同的编程语言。注意不要滥用名称。
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.
这篇关于在移动设备上禁用词缀的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
