Bootstrap 3 Fixed Top Navbar 'Flickering' On Mobile Scrolling using jQuery One-Page Scrolling Effect
Question
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!
6 answers
solution1
51 ACCPTED 2014-03-06 12:41:53
Try this
{
-webkit-backface-visibility: hidden;
}
solution2
5 2017-03-30 10:45:54
I had also 1px jumping problem with bootstrap navbar.
Solved by adding this to parent element (in my case <header> )
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: fixed;
z-index: 1000;
solution3
1 2016-01-18 05:45:33
我从导航栏折叠类中闪烁，所以我添加了 min-height 到它：
<div class="navbar-collapse collapse" style="min-height:50px; margin:auto;">
solution4
0 2015-04-23 00:56:17
Setting a height and width on the logo img stopped the flicker. This might not work for every situation but it did stop the jumpy animation.
I'm using Headroom.js with Bootstrap. The logo also changes from a larger square format at the top of the page to a smaller, horizontal orientation when you scroll down. Changing the height attribute with Javascript after the page renders starts the flickering again on Webkit browsers.
solution5
0 2018-10-17 21:59:09
I had a similar issue on Internet Explorer where the bootstrap navbar would clash with a slideshow plugin (flexslider) on the page. To fix it, set the z-index of the navbar to be a large number.
<ul id="sidebar" class="nav nav-stacked fixed" style="z-index: 100;">
solution6
0 2020-08-05 15:38:10
Make sure the content page has
{
overflow: hidden
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.