[jQuery] javascript 製作下拉式選單與捲軸連動效果

學生問的我寫出來也記錄一下，以往會做這種效果都是用點擊的，也因為有現成的 plugin 所以還沒完整自己寫過，這次有問到要跟下拉式選單怎麼互動我就來弄一下。

首先我下拉式選單跟內容都用 json 產生，利用的原理是抓到指定目標在頁面上的位置，然後讓頁面捲動過去，反之則是判斷現在捲動的位置，讓下拉式選單同步。

let years=[{
  year: 1910,
  id: "y1910"
},{
  year: 1920,
  id: "y1920"
},{
  year: 1930,
  id: "y1930"
}]

然後產出 UI 同時也記錄一下每個區塊的位置：

years.forEach(function(item, index){
  $("#select").append(`${item.year}`);
  $("body").append(`

`);
  item.scrollTop=$(".fullpage").eq(index).offset().top
})

這邊我把 fullpage 在 css 設定高度為 100vh


然後抓下拉式選單選了後要捲動的位置

$("#select").change(function(){
  let target=$(this).val();
  let scrollTo=$(target).offset().top-30;
  $("html").animate({
    scrollTop: scrollTo
  }, 700)
  
})

另外則是在頁面捲動時，判斷目前捲動的位置去變換下拉式選單的內容：

$(window).scroll(function(){
  let scrollTop=$(this).scrollTop();
  let targetVal=years.filter(function(item, index, array){
    return scrollTop> (item.scrollTop - 40);
  })
  targetVal.reverse();
  let now="";
  if(targetVal.length>0){
    now="#"+targetVal[0].id;
  }
  $("#select").val(now)
  
})

完整程式碼在這邊