根据滚动调整div高度

  • Z时代
  • 2024-01-10
  • 分类：问答

我需要在用户滚动页面时增加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();      
})

我该如何解决这个问题？

回答：

您必须设置当前滚动位置与页面高度的关系，并根据这两个数字计算滚动百分比。我更新了你的代码，希望对你有所帮助：

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

以上是 根据滚动调整div高度 的全部内容， 来源链接： utcz.com/qa/265112.html

回到顶部