спасибо за проверку этой проблемы.Bootstrap 3 Fixed Top Navbar 'Мерцание' на передвижной прокрутке с использованием jQuery One-Page Scrollling Effect
Мне было интересно, есть ли способ предотвратить установку фиксированной верхней панели навигации Bootstrap 3 из-за «мерцания» или прыжка вверх и вниз при автоматической прокрутке с помощью плагина jQuery.
активный пример здесь:
http://startbootstrap.com/templates/grayscale/
Если посмотреть на этот шаблон на мобильный телефон (я использую iPhone 4) использовать строку меню и нажмите на ссылку. Плагин jQuery приведет вас к разделу страницы, но просмотрите верхнюю панель меню. Он мерцает и танцует вокруг, как сумасшедший, и на самом деле не остается.
Вот код, связанный с этим примером, но большинство других примеров, которые я видел людей, которые делают то же самое по-разному с помощью Bootstrap fixed top nav, были одинаковыми.
HTML:
<body id="page-top" data-spy="scroll" data-target=".navbar-custom">
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="#page-top">
<i class="fa fa-play-circle"></i> <span class="light">Start</span> Bootstrap
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a href="#page-top"></a>
</li>
<li class="page-scroll">
<a href="#about">About</a>
</li>
<li class="page-scroll">
<a href="#download">Download</a>
</li>
<li class="page-scroll">
<a href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
...
JQuery:
//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$('.page-scroll a').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
CSS:
Сочетание Bootstrap 3 CSS по умолчанию и следующие пользовательские стили:
.navbar {
margin-bottom: 0;
border-bottom: 1px solid rgba(255,255,255,.3);
text-transform: uppercase;
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
background-color: #000;
}
.navbar-brand {
font-weight: 700;
}
.navbar-brand:focus {
outline: 0;
}
.navbar-custom a {
color: #fff;
}
.navbar-custom .nav li a {
-webkit-transition: background .3s ease-in-out;
-moz-transition: background .3s ease-in-out;
transition: background .3s ease-in-out;
}
.navbar-custom .nav li a:hover,
.navbar-custom .nav li a:focus,
.navbar-custom .nav li.active {
outline: 0;
background-color: rgba(255,255,255,.2);
}
.navbar-toggle {
padding: 4px 6px;
font-size: 16px;
color: #fff;
}
.navbar-toggle:focus,
.navbar-toggle:active {
outline: 0;
}
Опять же, лучший способ тиражирования проблемы является тестированием этого примера сайта с помощью мобильного устройства:
http://startbootstrap.com/templates/grayscale/
При испытании на ПК, проблема не возникает.
Спасибо за чтение! Если вы уже нашли решение этой проблемы, я бы с удовольствием это услышал, или если вы готовы взломать это, это будет очень признательно!
Я не вижу его на iPhone 4S с iOS7. – Dijon
Хм, может быть, это просто iPhone 4 и раньше. Это обнадеживает! – IronSummitMedia
@IronSummitMedia, пожалуйста, подтвердите ответ, если вы довольны его – Muhammed