Question

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

})

我该如何解决这个问题？

Answer 1

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

$(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高度

1 个答案: