スクロールに基づいてdivの高さを調整する

Question

ユーザーがページをスクロールしているときにdivの高さを大きくする必要があります。その高さを変更しなければならないのdivは右側のメニューです ​​

：

問題のサイトはこれです。

次のコードを詳しく説明しましたが、問題は、ユーザーがページの下部にいるときに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

ページの高さに関連して現在のスクロール位置を設定し、これらの2つの数値からスクロールパーセンテージを計算する必要があります。あなたのコードを更新しました。助けてくれることを願っています。

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