Question

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

我想要它： 1）滚动时不闪烁。 2）使用滚动条滚动页面时，请保持边框底部存在。

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;
      }
    }
  });
})

如果有人可以帮助或推荐我关于这个问题的特定来源，那就太棒了。谢谢！

Answer 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');
        }
    });
});

滚动时导航栏样式中的闪烁

1 个答案: