移动导航帮助：Jquery .scroll（）

Question

我正在使用此网站：http://www.toddoltmann.com

如您所见，导航图标（汉堡包）会根据滚动位置更改颜色。这在桌面上看起来不错，但在移动设备上效果不佳。如果您在移动设备上查看它（使用手指滚动的位置），您将看到颜色转换显示为非常延迟。如何修复此问题，以便当视口顶部到达特定部分（在移动设备上）时，导航图标可以平滑地更改颜色，而无需再次滚动来触发事件？

 Here's my HTML:

<div class="open">
 <span class="cls"></span> 
 <span>
  <ul class="sub-menu ">
   <li> <a href="#audio-section">Music</a> </li>
   <li> <a href="#events-section">Events</a> </li>
   <li> <a href="#video-section">Videos</a> </li>
   <li> <a href="#contact-section">Contact</a> </li>
  </ul>
 </span> 
 <span class="cls"></span> 
</div>

<!-- First Container: Splash -->
<div class="container-fixed full-width splash">
</div>

<!-- Second Container: Audio Player -->
<div class="container-fixed" id="audio-section">
  <div class="row audio">
      <h1>MUSIC</h1>
      <div class="audio-player">
    </div>
</div>

<!-- Third Container: Youtube Media-->
 <div class="container-fixed" id="events-section">
  <div class="row events">
    <h1>EVENTS</h1>
    <div class="col-xs-5 events-left">
    </div>
    <div class="col-xs-7 events-right">
    <div class="box-right"></div>

    </div>
  </div>
</div>

<!-- Third Container: Youtube Media-->
<div class="container-fluid full-width" id="video-section">
  <div class="row video">

    <h1>VIDEOS</h1>

    <div class="featured-video">

    </div>
    <div class="thumbnail-videos">

    </div>

  </div>
</div>

<!-- Fourth Container: Contact Form -->
<div class="container contact" id="contact-section">
  <h1>DROP ME A LINE</h1>
  <div class="row" >

  </div> 
</div>


Here's my jQuery:

$(window).scroll(function() {
  var iconPos = $('.open').offset().top + 10;
  var audPos = $('#audio-section').offset().top;
  var eventPos = $('.events').offset().top;
  var vidPos = $('#video-section').offset().top;
  var contactPos = $('#contact-section').offset().top;
  var navIcon = $('.open span');
    if (iconPos >= audPos && iconPos < eventPos) {
      navIcon.css('background-color', '#4e3446');
    } 
    else if (iconPos >= eventPos && iconPos < vidPos) {
      navIcon.css('background-color', '#e8dfd6');
    }
    else if (iconPos >= vidPos && iconPos < contactPos) {
      navIcon.css('background-color', '#4e3446');
    }
    else {
      navIcon.css('background-color', '#e8dfd6');
    }
});