Menu
thanks for checking out this issue.
I was wondering if there is a way to prevent a Bootstrap 3 fixed top navigation bar from 'flickering' or jumping up and down when auto-scrolled using a jQuery plugin.
An active example is here:
http://startbootstrap.com/templates/grayscale/
If you look at this template on a mobile phone (I am using an iPhone 4) use the menu bar and click on a link. The jQuery plugin takes you to the section of the page, but watch the top menu bar. It flickers and dances all around like crazy, and doesn't really stay put.
Here is the code associated with this example, but most other examples I've seen of people doing the same thing in different ways with Bootstrap fixed top nav's have been the same.
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:
Combination of the default Bootstrap 3 CSS and the following custom styles:
.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;
}
Again, the best way to replicate the problem is by testing this sample site using a mobile device:
http://startbootstrap.com/templates/grayscale/
When tested on a PC, the problem does not occur.
Thanks for reading! If you've already found a fix for this problem I'd love to hear it, or if you're willing to take a crack at this it would be much appreciated!
442
Try this
{
-webkit-backface-visibility: hidden;
}
Reference: https://developer.apple.com/library/content/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Using2Dand3DTransforms/Using2Dand3DTransforms.html#//apple_ref/doc/uid/TP40008032-CH15-SW40
54
I had flickering from the navbar collapse class so I added min-height to it:
<div class="navbar-collapse collapse" style="min-height:50px; margin:auto;">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
