CSS JS 選單滾動切換變色

codepen

需求：滑鼠滾動時，置頂的導覽列隨之變色與切換，使用popper.js顯示目前畫面高度位置

$(document).ready(() => {
            //滾動事件
  $(document).scroll(() => {
    let topNav = $('nav#myNav').offset().top; 
    let top01 = $('div#area01').offset().top; 
    let top02 = $('div#area02').offset().top; 
    let top03 = $('div#area03').offset().top; 
    $('div#debug_msg').text(`Nav.top: ${topNav}, 商品介紹: ${top01}, 規格說明: ${top02}, 運送方式: ${top03}`);// for debug
    if(topNav > top01){ //當 nav 滾到 area01 的區域內
      $('div#menu02, div#menu03').removeClass('bg-primary').addClass('bg-light'); 
      $('div#menu01').addClass('bg-primary').removeClass('bg-light'); 
    } else {
       $('div#menu01').addClass('bg-light').removeClass('bg-primary'); 
    }
    if(topNav > top02){ //當 nav 滾到 area02 的區域內
      $('div#menu01, div#menu03').removeClass('bg-primary').addClass('bg-light'); 
       $('div#menu02').addClass('bg-primary').removeClass('bg-light'); 
    } else {
      $('div#menu02').addClass('bg-light').removeClass('bg-primary'); 
    }
    if(topNav > top03){ //當 nav 滾到 area03 的區域內
        $('div#menu01, div#menu02').removeClass('bg-primary').addClass('bg-light'); 
        $('div#menu03').addClass('bg-primary').removeClass('bg-light'); 
    } else {
        $('div#menu03').addClass('bg-light').removeClass('bg-primary'); 
      }
  });
});

其他

popper.js

官網 顯示訊息，debug用