Отключить аффикс на мобильных устройствах
Привет, поэтому я сделал боковую панель и использовал некоторый 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>
Извините, это немного грязно, может кто-нибудь сказать мне, пожалуйста, что я делаю не так. Прикрепление вещей оказывается кошмаром, ха-ха
2 ответа
ОБНОВИТЬ
Поскольку вы используете аффикс Bootstrap, вы можете удалить эту функцию, удалив атрибут data-spy, И так как вы хотите соблюдать ширину .container Вы можете позвонить positionSidebar функция с setInterval функция. Он создает цикл, который запускается через определенные промежутки времени (в миллисекундах):
function positionSidebar() {
if ($('.container').first().innerWidth() > 750) {
$('#sidebar').affix({});
} else {
$('#sidebar').removeAttr('data-spy');
}
}
setInterval(positionSidebar, 300);О, я должен предупредить вас, что это Javascript и это другой язык программирования, отличный от Java. Будьте осторожны, чтобы не злоупотреблять именами.
Я столкнулся с этой проблемой сегодня. Мне нужно было отключить аффикс на экранах размером менее 1000 пикселей, и я нашел это решение. Я надеюсь, что это поможет другим
$("ElementWithAffixClass").on('affixed.bs.affix', function () {
if($(window).width() < 999)
{
$(this).removeClass('affix');
return;
}
}
Я использовал событие аффикса Bootstrap "affixed.bs.affix", которое срабатывает после добавления фиксированного положения к элементу. Вы также можете использовать "affix.bs.affix", который срабатывает до того, как к элементу добавлено фиксированное позиционирование.