Fatal编程技术网
  • javascript/
  • Javascript Bootstrap 3固定顶部导航栏'；闪烁'；使用jQuery实现手机滚动的一页滚动效果

Javascript Bootstrap 3固定顶部导航栏'；闪烁'；使用jQuery实现手机滚动的一页滚动效果

javascript jquery html css twitter-bootstrap

Javascript Bootstrap 3固定顶部导航栏'；闪烁'；使用jQuery实现手机滚动的一页滚动效果,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,感谢您查看此问题 我想知道是否有办法防止Bootstrap3固定顶导航条在使用jQuery插件自动滚动时“闪烁”或上下跳跃 一个活跃的例子如下： 如果您在手机上查看此模板（我使用的是iPhone4），请使用菜单栏并单击链接。jQuery插件将带您进入页面的部分，但请注意顶部的菜单栏。它像疯了似的忽闪忽灭，到处跳舞，并没有真正停留在原地 下面是与此示例相关的代码，但我所看到的大多数其他示例都是相同的，即人们使用Bootstrap fixed top nav以不同的方式做相同的事情 HTML: &

感谢您查看此问题

我想知道是否有办法防止Bootstrap3固定顶导航条在使用jQuery插件自动滚动时“闪烁”或上下跳跃

一个活跃的例子如下：

如果您在手机上查看此模板（我使用的是iPhone4），请使用菜单栏并单击链接。jQuery插件将带您进入页面的部分，但请注意顶部的菜单栏。它像疯了似的忽闪忽灭，到处跳舞，并没有真正停留在原地

下面是与此示例相关的代码，但我所看到的大多数其他示例都是相同的，即人们使用Bootstrap fixed top nav以不同的方式做相同的事情

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 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:

<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 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();
    });
});
默认引导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;
}
同样，复制问题的最佳方法是使用移动设备测试此示例站点：

在PC上测试时，不会出现问题

谢谢你的阅读！如果你已经找到了解决这个问题的方法，我很想听听，或者如果你愿意尝试一下，我将不胜感激

试试这个

{
  -webkit-backface-visibility: hidden;
}
参考资料：

在徽标
img
上设置高度和宽度可停止闪烁。这可能不适用于所有情况，但它确实停止了跳动的动画

我将headloom.js与Bootstrap一起使用。向下滚动时，徽标也会从页面顶部的较大方形格式更改为较小的水平方向。在页面呈现后使用Javascript更改高度属性会在Webkit浏览器上再次开始闪烁。

我从navbar折叠类中获得了闪烁，因此我向其添加了最小高度：

<div class="navbar-collapse collapse" style="min-height:50px; margin:auto;">
引导导航栏也有1px跳跃问题

通过将其添加到父元素（在我的示例中为
）来解决此问题

我在InternetExplorer上也遇到过类似的问题，引导导航栏会与页面上的幻灯片放映插件（flexslider）发生冲突。要修复此问题，请将导航栏的z索引设置为一个大数字

<ul id="sidebar" class="nav nav-stacked fixed" style="z-index: 100;">
确保内容页

{
    overflow: hidden
}
我在iPhone4S和iOS7上看不到它。嗯，可能只是iPhone4和更早的版本。这让人放心@IronSummitMedia如果您对itExcellent满意，请接受答案！我有一个闪烁的问题，这个问题马上解决了。遇到同样的问题，找到了答案。但是在哪里（或哪个元素）应用这种样式？@bcbishop您应用过元素的类或ID吗？太好了！这样的浮雕。navbar-nav{-webkit背面可见性：隐藏；}