2020年1月3日 星期五

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(``);
  $("body").append(`
${item.year}
`); 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)
  
})


完整程式碼在這邊

See the Pen
scroll-change
by deathhell (@deathhell)
on CodePen.


反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...