[英]Bootstrap 3 Fixed Top Navbar 'Flickering' On Mobile Scrolling using jQuery One-Page Scrolling Effect
感谢您查看此问题。
我想知道是否有办法防止 Bootstrap 3 固定顶部导航栏在使用 jQuery 插件自动滚动时“闪烁”或上下跳跃。
一个活跃的例子在这里：
http://startbootstrap.com/templates/grayscale/
如果您在手机（我使用的是 iPhone 4）上查看此模板，请使用菜单栏并单击链接。 jQuery 插件会将您带到页面的部分，但请注意顶部菜单栏。 它像疯了一样到处闪烁和跳舞，并没有真正保持原状。
这是与此示例相关的代码，但我见过的大多数其他示例都相同，人们以不同的方式使用 Bootstrap 固定顶部导航来做同样的事情。
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/
在 PC 上测试时，不会出现此问题。
谢谢阅读！ 如果您已经找到了解决此问题的方法，我很乐意听取您的意见，或者如果您愿意尝试解决这个问题，我们将不胜感激！
尝试这个
{
-webkit-backface-visibility: hidden;
}
参考： https : //developer.apple.com/library/content/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Using2Dand3DTransforms/Using2Dand3DTransforms.html#//apple_ref/doc/uid/TP40008032-CH15-SW40
我也有引导导航栏的 1px 跳跃问题。
通过将其添加到父元素来解决（在我的情况下为<header> ）
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: fixed;
z-index: 1000;
我从导航栏折叠类中闪烁，所以我添加了 min-height 到它：
<div class="navbar-collapse collapse" style="min-height:50px; margin:auto;">
在徽标img上设置高度和宽度可以停止闪烁。 这可能不适用于所有情况，但它确实阻止了跳跃动画。
我在 Bootstrap 中使用 Headroom.js。 当您向下滚动时，徽标也会从页面顶部的较大方形格式更改为较小的水平方向。 在页面呈现后使用 Javascript 更改高度属性会在 Webkit 浏览器上再次开始闪烁。
我在 Internet Explorer 上遇到了类似的问题，其中引导程序导航栏会与页面上的幻灯片插件 (flexslider) 发生冲突。 要修复它，请将导航栏的 z-index 设置为一个大数字。
<ul id="sidebar" class="nav nav-stacked fixed" style="z-index: 100;">
确保内容页面有
{
overflow: hidden
}
jQuery：在页面滚动时更改固定顶部导航栏的文本颜色
[英]jQuery: change text color of a fixed top navbar at the scrolling of the page
如何在bootstrap中滚动后创建一个scrollspy navbar-fixed-top？
[英]How to create a scrollspy navbar-fixed-top after scrolling in bootstrap?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.