根据滚动调整div高度

debugcn 发表于 Dev

莎拉·希尔

我需要在用户滚动页面时增加 div 的高度。

有问题的网站是这样的：http : //cdscostruzioni.digitalcanali.com/

需要改变高度的 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();                     

})

我该如何解决这个问题？

萨沙M78

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。