.header{
  height:30px;
}
.fullpage{
  height:100vh;
  border-bottom:2px solid #666;
  font-size: 25px;
}

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

years.forEach(function(item, index){
  $("#select").append(`<option value="#${item.id}">${item.year}</option>`);
  $("body").append(`<div class="fullpage" id="${item.id}">
  ${item.year}
</div>`);
  item.scrollTop=$(".fullpage").eq(index).offset().top
})



$("#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)
  
})