根据滚动调整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高度

回答

相关问题