Bootstrap 3固定顶部Navbar的“闪烁”使用jQuery单页滚动效果的移动滚动 [英] Bootstrap 3 Fixed Top Navbar 'Flickering' On Mobile Scrolling using jQuery One-Page Scrolling Effect
问题描述
感谢您检查这个问题。
我想知道是否有一种方法来防止Bootstrap 3固定顶部导航栏从闪烁或跳跃和
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.
一个有效的例子如下：
< a href =http://startbootstrap.com/templates/grayscale/> http://startbootstrap.com/templates/grayscale/
http://startbootstrap.com/templates/grayscale/
如果您在手机上查看此模板（我使用的是iPhone 4），请使用菜单栏并点击链接。 jQuery插件会带你到页面的部分，但看着顶部的菜单栏。
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： / p>
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和以下自定义样式的组合：
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 /
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!
推荐答案
尝试此操作
{
-webkit-backface-visibility: hidden;
}
这篇关于Bootstrap 3固定顶部Navbar的“闪烁”使用jQuery单页滚动效果的移动滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
