스크롤을 기준으로 div 높이 조정

Question

사용자가 페이지를 스크롤하는 동안 div 높이를 늘려야합니다.

문제의 사이트

은 이것이다 : http://cdscostruzioni.digitalcanali.com/

의 높이를 변경해야하는 사업부가 오른쪽에있는 메뉴입니다.

다음 코드를 자세히 작성했지만 사용자가 페이지 하단에있을 때 div가 100 %에 도달해야하며 이제는 높이가 너무 높아진다는 것이 문제입니다.

$(function(){ 
    $(window).scroll(function() { 
     var scrollHeight = $(document).height(); 
     var $myDiv = $('.nav__front'); 
     var st = $(this).scrollTop(); 
     $myDiv.width(st);  
     if(st == 0) {    
      $myDiv.hide(); 
     } else { 
      $myDiv.show(); 
     } 
    }) 
    .scroll();      

}) 

어떻게 문제를 해결할 수 있습니까?

Answer 1

페이지 높이를 기준으로 현재 스크롤 위치를 설정하고이 두 숫자에서 스크롤 비율을 계산해야합니다. 귀하의 코드를 업데이트하여 도움을 드리겠습니다.

$(function(){ 
    $(window).scroll(function() { 
     var scrollHeight = $(document).height(); 
     var scrollPos = $(this).scrollTop(); 

     var $myDiv = $('.nav__front'); 

     // calculate the percentage 
     var percentScrolled= scrollPos/scrollHeight * 100; 

     $myDiv.width(percentScrolled + '%');  
     if(st == 0) {    
      $myDiv.hide(); 
     } else { 
      $myDiv.show(); 
     } 
    }) 
    .scroll();      
})