높이에 따라 css 조정하기 함수들

전체 코드

function TopHeightObject(target){
  var TopHeightObjectList = []
  $(target).each(function(){
    console.log($(this).offset().top);
    TopHeightObjectList.push($(this));
  });
  return TopHeightObjectList
}
function TopHeightNavColor(target,topHeight,scrollHeight){
  console.log(target,topHeight,scrollHeight);
  if (topHeight < scrollHeight){
    $(target).each(function(){ 
      this.animate({color: "#000"}, 1000 );
    });
  }
  else{
    $(target).each(function(){ 
      this.animate({color: "#fff"}, 1000 )}
    );
  }
}

function TopNavMovementButton(buttonTarget,MoveHeight){
  $(buttonTarget).click(()=> {
    $('body,html').animate({scrollTop : MoveHeight}, 1000);
  });
}


$(document).ready(()=>{
  var TopHeightList = TopHeightObject('body section');
  
  //기본
  TopNavMovementButton('#about-btn',TopHeightList[1].offset().top)
  TopNavMovementButton('#contact-btn',TopHeightList[2].offset().top)
  
  //스크롤
  $(window).scroll(()=>{
    var scrollHeight = $(window).scrollTop()
    TopHeightNavColor('.menu-right button',TopHeightList[1].offset().top,scrollHeight);
  })
})

네비게이션 색깔 함수

function TopHeightNavColor(target,topHeight,scrollHeight){
  console.log(target,topHeight,scrollHeight);
  if (topHeight < scrollHeight){
    $(target).each(function(){ 
      this.animate({color: "#000"}, 1000 );
    });
  }
  else{
    $(target).each(function(){ 
      this.animate({color: "#fff"}, 1000 )}
    );
  }
}

네비게이션 이동 함수

function TopNavMovementButton(buttonTarget,MoveHeight){
  $(buttonTarget).click(()=> {
    $('body,html').animate({scrollTop : MoveHeight}, 1000);
  });
}

 

화면 함수

function TopHeightObject(target){
  var TopHeightObjectList = []
  $(target).each(function(){
    console.log($(this).offset().top);
    TopHeightObjectList.push($(this));
  });
  return TopHeightObjectList
}