如何避免滚动条滚动时，onscroll事件的频繁触发？

Question

在如下的吸顶效果的代码中，当滚动条滚动时，会频繁触发事件，导致红条div一闪一闪的，请问该如何解决这个问题？（貌似需要用到防抖和节流的知识，可否分别给出利用防抖和节流的方法）

点击↓
https://jsfiddle.net/20170808...

$(window).scroll(function () {

  if($(window).scrollTop() > $('div').offset().top){

    $('div').css('position','fixed');

    $('div').css('top',0);

  }else{

    $('div').css('position','absolute');

    $('div').css('top',170);

  }

});