javascript - 简单的滚动 spy 效果jquery

Question

提前抱歉，这里是初学者问题:-)

我正在尝试在我的导航上实现滚动 spy 效果。基本上，我只需要当我滚动到相应部分时我的链接会变成红色。 我已经在网上查找并找到了一些示例，但我尝试的任何方法都没有真正解决问题，而且我的 JS 无论如何都很马虎。

有人可以帮忙吗？

这是我迄今为止拥有的完整 JSFiddle: https://jsfiddle.net/Tiph/v6vtczwe/

非常感谢您的时间和帮助!

    $(document).ready(function(){


    //SMOOTHSCROLL
    $('.nav-top a, .scrollDown').click(function(){  
      $('html, body').animate({
        scrollTop: $( $(this).attr('href') )
        .offset().top 
      }, 700);
      return false;
    });

});

$(window).scroll(function(){ 
    var $window =$(window);
  var scroll_top = $(window).scrollTop();
   console.log( $(window).scrollTop());
  var position = $("section").offset().top;
  var news = $("#newsSection").offset().top;
    var shows = $("#showsSection").offset().top;

if (scroll_top >= news) {
             $('.news').addClass("selected");
             }
if (scroll_top >= shows) {
             $('.shows').addClass("selected");
             }

});

Answer 1

$('.nav-top a, .scrollDown').click(function() {
  $('html, body').animate({
    scrollTop: $($(this).attr('href'))
      .offset().top
  }, 700);
  return false;
});

$(window).scroll(function() {
  var x = $(".nav-top").offset().top;
  $("section").each(function(index) {
    var z = $(this).attr("id");
    if (x > $(this).offset().top && x <= $(this).offset().top + $(this).height()) {
      $('a.' + z).css("color", "red");
    } else {
      $('a.' + z).css("color", "gray")
    }
  })
})

.menu > nav {
  height: 50px;
  position: fixed;
  bottom: 0%;
  width: 100%;
  background-color: #393838;
  opacity: 1;
  padding-left: 70px;
}
.selected {
  color: red
}
.nav-top {
  padding: 15px 0;
  background: rgb(034, 034, 034);
  position: relative;
  z-index: 900;
  display: flex;
  flex-flow: row wrap;
  position: relative;
}
.nav-top a {
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  font-family: 'Oswald';
  font-size: 30px;
  letter-spacing: 2px;
  line-height: 55px;
  margin-right: 30px;
  transition: .6s all ease-in-out;
}
.nav-top a:hover {
  color: #de031d;
  transition: .3s all ease-in-out;
}
.section {
  height: 600px;
}
.grey {
  background-color: grey;
}
.darkGrey {
  background-color: darkgrey;
}
a.newsSection{
color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
  <nav class="nav-top">
    <a class="newsSection" href="#newsSection">News</a>
    <a class="showsSection" href="#showsSection">Shows</a>
    <a class="musicSection" href="#musicSection">Discographie</a>
    <a class="mediaSection" href="#mediaSection">Medias</a>
    <a class="bioSection" href="#bioSection">Bio</a>
  </nav>
</div>
<section id="newsSection" class="section grey">
  first section
</section>
<section id="showsSection" class="section darkGrey">
  second section
</section>
<section id="musicSection" class="section grey">
  third section
</section>
<section id="mediaSection" class="section darkGrey">
  fourth section
</section>
<section id="bioSection" class="section grey">
  fifth section
</section>