Javascript 滚动到目标区域时更改按钮的颜色

我终于弄明白了如何在单击按钮时捕捉到滚动条上的某个部分。按钮在单击时会更改其颜色。你能帮我弄清楚当页面滚动时如何改变按钮的颜色吗？因此，当屏幕位于第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>

小组1
小组2
小组3
小组4

CSS

*{
填充：0px；
边际：0px；
大纲：无；
}
身体{
溢出y：隐藏；
}
h1{
填充：50VH0；
字体大小：40px；
}
.按钮{
宽度：30px；
位置：固定；
右：0px；
z指数：999；
}
.按钮座{
高度：100vh；
显示：表格单元格；
垂直对齐：中间对齐；
}
.按钮a{
显示：块；
文字装饰：无；
字体大小：50px；
颜色：#000；
过渡：全部。3秒轻松；
-webkit过渡：所有.3s轻松；
}
a、 活跃的{
颜色：#999；
}
李{
列表样式：无；
}
.小组{
浮动：左；
宽度：100%；
文本对齐：居中；
高度：100vh；
-webkit转换：translateZ（0）；
变换：translateZ（0）；
-webkit转换：-webkit转换0.3s轻松输入输出；
转换：转换0.3s轻松输入输出；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
}
.专题小组1{
背景：#ccc；
}
.专题小组2{
背景：#ff0；
}
.专题小组3{
背景：ddd；
}
.专题小组4{
背景：#0ff；
}

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>

$（文档）.ready（函数（）{
$（“.buttons-a”）。单击（函数（）{
$（this.addClass（'active'）.sides（）.removeClass（'active'）；
})
});
//仅以“#”开头的@href处理链接
$（文档）。在（'click'，'a[href^=“#”]”上，函数（e）{
//目标元素id
var id=$（this.attr（'href'）；
//目标元素
变量$id=$（id）；
如果（$id.length==0）{
返回；
}
//防止标准哈希导航（避免在IE中闪烁）
e、 预防默认值（）；
//相对于文档的顶部位置
var pos=$id.offset（）.top；
//动画顶部滚动
$（'body，html'）.animate（{scrollTop:pos}）；
});
var滚动=假；
$（文档）.on（“wheel mousewheel DOMMouseScroll”，函数（e）{
如果（！滚动）{
var scroll=$（document.scrollTop（）；
如果（e.type==“鼠标滚轮”| | e.type==“滚轮”）{
如果（e.originalEvent.deltaY>0）{
向下=真；
}否则{
向下=假；
}
}else if（e.type==“DOMMouseScroll”）{
如果（e.originalEvent.detail>0）{
向下=真；
}否则{
向下=假；
}
}否则，如果（例如类型==“键控”）{
var keycode=e.originalEvent.keycode；
如果（keycode==40 | | keycode==32 | | keycode==34）{//向下，空格，pgdwn
向下=真；
}else如果（keycode==38 | | keycode==33）{//up，pgup
向下=假；
}如果（keycode==35）{//end
向下=2；
}如果（keycode==36）{//home
向下=3；
}否则{
返回；
}
}否则{
返回；
}
var destination=滚动；
var h=窗内高度；
如果（向下和滚动！==h*3）{
目的地=数学楼层（（目的地+h）/h）*h；
}如果（！向下并滚动！==0），则为else{
目的地=数学单元（（目的地-h）/h）*h；
}否则{
返回；
}
滚动=真；
$（“html，body”）.stop（）.animate({
滚动顶端：目的地
}，函数（）{
滚动=假；
});
}
})

谢谢…

您可以使用

.scrollHeight

获取元素的窗口“滚动位置”，这是该元素的最顶端点。因此，元素的窗口“滚动顶部”将是

.scrollHeight

，而元素的窗口“滚动底部”将是

.scrollHeight+（元素高度）

编辑：改为使用JSFIDLE更新

---

òffsetTop

告诉您元素左上方在DOM上的位置，

document.documentElement.scrollTop

告诉您当前滚动的位置

if（document.getElementById（'panel2div'）.offsetTop>document.documentElement.scrollTop）{document.querySelector（'a[href=“#panel2div”]”）style.color=“orange”}

@Pavlo您能给我确切的jquery代码吗？谢谢。我还应该补充一些说明，在浏览器中，

scrollHeight

会随着页面的向下移动而增加，这可能会让人很困惑。我如何才能将类添加到按钮中？在我放置注释的地方“//do something”，在此处添加类$（“#myBtn”）。addClass（'myClass'）；这太棒了！但是，从顶部开始的所有其他部分将变为红色，向上滚动将该部分变为蓝色。唯一应该改变的是屏幕上的焦点。

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