滚动到目标部分时更改按钮的颜色

Question

我终于想出了如何在滚动和单击按钮时捕捉到某个部分。单击时按钮会改变颜色。您能帮我弄清楚如何在页面滚动时更改按钮颜色吗？所以当屏幕在第 1 部分时，按钮 1 应该是灰色的。如果我滚动到第 2 部分，按钮 2 应该是灰色的，其他按钮应该变回黑色。代码如下：

<header class="nav">
    <nav class="buttons">
        <div class="button-holder">
            <a class="buttons-a active" href="#panel1div">•</a>
            <a class="buttons-a" href="#panel2div">•</a>
            <a class="buttons-a" href="#panel3div">•</a>
            <a class="buttons-a" href="#panel4div">•</a>
        </div>
    </nav>
</header>

<section id="paneldivs">
    <article id="panel1div" class="panel1 panels">
        <h1>Panel 1</h1>
    </article>

    <article id="panel2div" class="panel2 panels">
        <h1>Panel 2</h1>
    </article>

    <article id="panel3div" class="panel3 panels">
        <h1>Panel 3</h1>
    </article>
    <article id="panel4div" class="panel4 panels">
        <h1>Panel 4</h1>
    </article>
</section>

CSS

* {
    padding: 0px;
    margin: 0px;
    outline: none;
}

body {
    overflow-y: hidden;
}

h1 {
    padding: 50vh 0;
    font-size: 40px;
}

.buttons {
    width: 30px;
    position: fixed;
    right: 0px;
    z-index: 999;
}

.button-holder {
    height: 100vh;
    display: table-cell;
    vertical-align: middle;
}

.buttons a {
    display: block;
    text-decoration: none;
    font-size: 50px;
    color: #000;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
}

a.active {
    color: #999;
}

li {
    list-style: none;
}

.panels {
    float: left;
    width: 100%;
    text-align: center;
    height: 100vh;
    -webkit-transform: translateZ( 0 );
    transform: translateZ( 0 );
    -webkit-transition: -webkit-transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.panel1 {
    background: #ccc;
}

.panel2 {
    background: #ff0;
}

.panel3 {
    background: #ddd;
}

.panel4 {
    background: #0ff;
}
</style>

jQuery

<script>
$(document).ready(function(){
$(".buttons-a").click(function(){
    $(this).addClass('active').siblings().removeClass('active');
})
});
// handle links with @href started with '#' only
$(document).on('click', 'a[href^="#"]', function(e) {
    // target element id
    var id = $(this).attr('href');

    // target element
    var $id = $(id);
    if ($id.length === 0) {
        return;
    }

    // prevent standard hash navigation (avoid blinking in IE)
    e.preventDefault();

    // top position relative to the document
    var pos = $id.offset().top;

    // animated top scrolling
    $('body, html').animate({scrollTop: pos});
});
var scrolling = false;

$(document).on("wheel mousewheel DOMMouseScroll", function(e) {
  if (!scrolling) {
  var scroll = $(document).scrollTop();
  if (e.type === "mousewheel" || e.type === "wheel") {
    if (e.originalEvent.deltaY > 0) {
      down = true;
    } else {
      down = false;
    }
  } else if (e.type === "DOMMouseScroll") {
    if (e.originalEvent.detail > 0) {
      down = true;
    } else {
      down = false;
    }
  } else if (e.type === "keyup") {
          var keycode = e.originalEvent.keyCode;
          if (keycode === 40 || keycode === 32 || keycode === 34) { //down, space, pgdwn
            down = true;
          } else if (keycode === 38 || keycode === 33) { //up, pgup
            down = false;
          } else if (keycode === 35) { //end
            down = 2;
          } else if (keycode === 36) { //home
            down = 3;
          } else {
            return;
          }
        } else {
    return;
  }
  var destination = scroll;
  var h = window.innerHeight;
  if (down && scroll !== h * 3) {
    destination = Math.floor((destination + h) / h) * h;
  } else if (!down && scroll !== 0) {
    destination = Math.ceil((destination - h) / h) * h;
  } else {
    return;
  }
    scrolling = true;
  $("html, body").stop().animate({
    scrollTop: destination
  }, function() {
    scrolling = false;
  });
  }
})
</script>

谢谢...

Answer 1

您可以使用.scrollHeight 获取元素的窗口“滚动位置”，这是该元素的最高点。所以元素的窗口“滚动顶部”将是.scrollHeight，而元素的窗口“滚动底部”将是.scrollHeight + (height of element)。

编辑：改为使用 jsfiddle 更新

https://jsfiddle.net/wby54h1e/39/