滚动时导航栏样式闪烁答案

【问题标题】：Flicker in nav bar styling when scrolling滚动时导航栏样式闪烁
【发布时间】：2015-01-16 19:24:27
【问题描述】：

当我在某个部分滚动时，我的底部边框（导航链接）出现闪烁问题。我想这不是真正的闪烁，而是每次我在该部分中滚动时都会重置的过渡。例如（参考下面的源代码），如果我的窗口当前在一个部分中并且我一点一点滚动，我的活动导航链接的边框底部会闪烁。另外，如果我按住滚动条向下滚动，边框底部就会消失。

我希望它： 1) 滚动时不闪烁。 2) 使用滚动条在页面上滚动时，保持border-bottom 存在。

http://jsfiddle.net/binhxn89/zzmbex55/16/

HTML：

<body>
<div class="navbar">
    <div class="container cf">
        <ul>
            <li><a href="#welcome" class="link active">Home</a></li>
            <li><a href="#link1" class="link">Link1</a></li>
            <li><a href="#link2" class="link">link2</a></li>
            <li><a href="#link3" class="link">link3</a></li>
            <li><a href="#link4" class="link">link4</a></li>
          </ul>
    </div>
</div>

<section id="welcome" class="welcome"></section>
<section id="link1" class="link1"></section>
<section id="link2" class="link2"></section>
<section id="link3" class="link3"></section>
<section id="link4" class="link4"></section>
</body>

CSS：

body, html {
    height: 100%;
    color: #f3f3f3;
    font-family: Arial, sans-serif;
}

body {
    margin: 0;
    overflow-x: hidden;
}

    .container {
    width: 90%;
    margin: 0 auto;
}

.navbar {
    background: rgba(0,0,0, 0.9);
    width: 100%;
    position: fixed;
    z-index: 20;
}
.navbar ul li {
    list-style: none;
    float: left;
}

.navbar ul li a {
    color: #fff;
    display: block;
    font-size: 14px;
    margin: 0 10px;
    padding: 20px 5px;
    text-decoration: none;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.navbar ul li a:hover,
.navbar ul li a.active {
    margin-top: -3px;
    font-weight: bold;
    padding-bottom: 8px;
    border-bottom: 2px solid #fff;
}

section {
    height:100%;
    z-index: 10;
    position: relative;
}

.welcome {
    background: #ebebeb;
}

.link1 {
    background: #aaa;
}
.link2 {
    background: #bbb;
}
.link3 {
    background: #ccc;
}
.link4 {
    background: #ddd;
}

JS：

$(document).ready(function() {

$(window).scroll(function () {
  var y = $(this).scrollTop();
    $('.link').each(function (event) {
      if (y >= $($(this).attr('href')).offset().top - 10) {
        $('.link').not(this).removeClass('active');
        $(this).addClass('active');
      }
    });
  });

$('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 600);
        return false;
      }
    }
  });
})

如果有人可以帮助我或将我推荐给有关此问题的特定来源，那就太好了。谢谢！

【问题讨论】：

您在哪些浏览器中看到此问题？
在 Chrome 和 Firefox 中测试，两者都存在。还有，观察；如果您让动画完成，则不会出现此问题。
@Scriptable 我正在使用 Chromium，但我想我希望它适用于所有浏览器。
@TimLewis 您是否知道如何忽略或绕过完成动画问题？
我还在看……还没有运气。并且不要太担心浏览器的事情。可能会询问第一条评论，看看是否只有某个浏览器有问题。

标签： javascript jquery html css

【解决方案1】：

请查看here 或查看下面的代码。首先，我计算一个元素的高度并得到他的位置。之后，我将零件与当前位置进行比较。到目前为止，Safari 或 Chrome 上没有闪烁，我希望这能解决它。您的解决方案似乎引发了多个事件，如果您查看console.log(y);，您会注意到第 2、3、4 和 5 部分有很多双精度值。

$(window).scroll(function() {
    var y = $(this).scrollTop();
    var sectionHeigth = $('section').height();
    var part = Math.round((y / sectionHeigth));

    $('.link').each(function(event) {
        var position = $($(this).attr('href')).offset().top;
        if ((part * sectionHeigth) != position) {
            $(this).removeClass('active');
        } else {
            $(this).addClass('active');
        }
    });
});

这是您的评论的update。我会检查当前位置是否在start 和start + height 位置之间。就是这样。

$(window).scroll(function() {
    var y = $(this).scrollTop();
    $('.link').each(function(event) {
        var position = $($(this).attr('href')).offset().top;
        var a = $($(this).attr('href')).height();
        if (y >= position && y <= position + a) {
            $(this).addClass('active');
        } else {
            $(this).removeClass('active');
        }
    });
});

【讨论】：

嗨，我想我应该更具体一些，但答案确实解决了这个具体问题，所以谢谢！但是，我想知道如果根本没有指定截面高度，您是否知道如何解决该问题。例如：jsfiddle.net/binhxn89/zzmbex55/24，这些导航链接无法按上述方式运行。如果你能解决这个问题，请告诉我！
@binhxn89 请看看我的更新。这应该可以解决您的问题。
您好，非常感谢您的回复，它有效！我一直在开发一个单页网站，并开始在每个部分添加一些内容，这些内容占据了大约一个窗口高度。除了您上次更新的答案之外，我想知道当下一部分从窗口视图/高度向上滚动到一半（或 3/4 处）时，如何更改导航链接？希望这是我要问的最后一件事。你帮了大忙！
@binhxn89 只需调整 if 子句 (y >= position && y <= position + a) 中的范围即可。或者将开始位置移到更早的位置。 y 是当前位置。 position 是截面位置，a 是截面高度。我希望这会有所帮助。