个人中心
gpt4 book ai didi

javascript - Bootstrap 3 Fixed Top Navbar 'Flickering' On Mobile Scrolling using jQuery 单页滚动效果

转载 作者：技术小花猫 更新时间：2023-10-29 12:35:34 27 4
gpt4 key购买 nike

感谢您查看此问题。

我想知道是否有一种方法可以防止 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上测试，没有出现这个问题。

感谢阅读!如果您已经找到解决此问题的方法，我很乐意听到它，或者如果您愿意尝试解决这个问题，我们将不胜感激!

最佳答案

关于javascript - Bootstrap 3 Fixed Top Navbar 'Flickering' On Mobile Scrolling using jQuery 单页滚动效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21522527/

27 4 0
文章推荐： html - CMS 中搜索表单的 POST 与 GET 方法
文章推荐： css - 每个 div 的底部添加 5px 额外边距
文章推荐： html - 离线 lorem ipsum 生成器
文章推荐： javascript - 将鼠标悬停以暂停选取框
技术小花猫
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com