Javascript 简单scrollspy效果jquery

事先抱歉，这里的初学者问题：-）

我正试图在我的导航上实现滚动间谍效果。基本上，我只需要我的链接得到一个红色，当我滚动到相应的部分。 我已经在网上找到了一些例子，但是我试过的都没有成功，而且我的JS也是草率的

有人能帮忙吗

以下是我到目前为止的完整JSFIDLE：

谢谢你的时间和帮助

    $(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");
             }

});

$（'.nav top a，.scrollDown'）。单击（函数（）{
$（'html，body'）。设置动画({
滚动顶端：$（$（this.attr（'href'））
.offset（）.top
}, 700);
返回false；
});
$（窗口）。滚动（函数（）{
var x=$（“.nav top”）.offset（）.top；
$（“节”）。每个功能（索引）{
var z=$（this.attr（“id”）；
如果（x>$（此）.offset（）.top和x导航{
高度：50px；
位置：固定；
底部：0%；
宽度：100%；
背景色#393838；
不透明度：1；
左侧填充：70px；
}
.选定{
颜色：红色
}
.导航顶部{
填充：15px0；
背景：rgb（0343034）；
位置：相对位置；
z指数：900；
显示器：flex；
柔性流：行换行；
位置：相对位置；
}
.导航顶部a{
颜色：白色；
文字装饰：无；
文本转换：大写；
字体系列：“Oswald”；
字体大小：30px；
字母间距：2px；
线高：55px；
右边距：30px；
过渡：.6秒，全部缓进缓出；
}
.导航顶部a：悬停{
颜色：#de031d；
过渡：.3都容易进出；
}
.科{
高度：600px；
}
格雷先生{
背景颜色：灰色；
}
darkGrey先生{
背景色：暗灰色；
}
a、 新闻组{
颜色：红色；
}

第一节
第二节
第三部分
第四节
第五节