Bootstrap 3 使用 jQuery 单页滚动效果修复移动设备滚动时顶部导航栏“闪烁”的问题
[英]Bootstrap 3 Fixed Top Navbar 'Flickering' On Mobile Scrolling using jQuery One-Page Scrolling Effect
问题描述
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.我想知道是否有办法防止 Bootstrap 3 固定顶部导航栏在使用 jQuery 插件自动滚动时“闪烁”或上下跳跃。
An active example is here:一个活跃的例子在这里：
http://startbootstrap.com/templates/grayscale/ 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.如果您在手机（我使用的是 iPhone 4）上查看此模板，请使用菜单栏并单击链接。 The jQuery plugin takes you to the section of the page, but watch the top menu bar. jQuery 插件会将您带到页面的部分，但请注意顶部菜单栏。 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.这是与此示例相关的代码，但我见过的大多数其他示例都相同，人们以不同的方式使用 Bootstrap 固定顶部导航来做同样的事情。
HTML: 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：
//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: CSS：
Combination of the default Bootstrap 3 CSS and the following custom styles:默认 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;
}
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.在 PC 上测试时，不会出现此问题。
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 个解决方案
解决方案1
51 已采纳 2014-03-06 12:41:53
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参考： https : //developer.apple.com/library/content/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Using2Dand3DTransforms/Using2Dand3DTransforms.html#//apple_ref/doc/uid/TP40008032-CH15-SW40
解决方案2
5 2017-03-30 10:45:54
I had also 1px jumping problem with bootstrap navbar.我也有引导导航栏的 1px 跳跃问题。
Solved by adding this to parent element (in my case <header> )通过将其添加到父元素来解决（在我的情况下为<header> ）
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: fixed;
z-index: 1000;
解决方案3
1 2016-01-18 05:45:33
我从导航栏折叠类中闪烁，所以我添加了 min-height 到它：
<div class="navbar-collapse collapse" style="min-height:50px; margin:auto;">
解决方案4
0 2015-04-23 00:56:17
Setting a height and width on the logo img stopped the flicker.在徽标img上设置高度和宽度可以停止闪烁。 This might not work for every situation but it did stop the jumpy animation.这可能不适用于所有情况，但它确实阻止了跳跃动画。
I'm using Headroom.js with Bootstrap.我在 Bootstrap 中使用 Headroom.js。 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.在页面呈现后使用 Javascript 更改高度属性会在 Webkit 浏览器上再次开始闪烁。
解决方案5
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.我在 Internet Explorer 上遇到了类似的问题，其中引导程序导航栏会与页面上的幻灯片插件 (flexslider) 发生冲突。 To fix it, set the z-index of the navbar to be a large number.要修复它，请将导航栏的 z-index 设置为一个大数字。
<ul id="sidebar" class="nav nav-stacked fixed" style="z-index: 100;">
解决方案6
0 2020-08-05 15:38:10
Make sure the content page has确保内容页面有
{
overflow: hidden
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.