根據滾動調整div高度

我需要在用戶滾動頁面時增加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();      

})

我該如何解決這個問題？

來源

2017-12-27 Sarah Heer

在Chrome中我看不到菜單增長，在我滾動它的瞬間就看不見了。你爲什麼不簡單地使用移動顯示的媒體查詢在右上方粘貼導航？ – SaschaM78

嗨Sascha，我清理了網站的內部緩存，現在你應該看到它正確 –

您必須設置當前滾動位置與頁面高度的關係，並根據這兩個數字計算滾動百分比。我更新了你的代碼，希望對你有所幫助：

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

來源

2017-12-27 13:04:40 SaschaM78

謝謝你這麼多sascha！它完美的工作 –

很棒的聽到！和好的工作，順便說一句:-) – SaschaM78

根據滾動調整div高度

回答

相關問題