Javascript 从div'中减去scrollTop的百分比;使用jquery在滚动条上显示的宽度

Javascript 从div'中减去scrollTop的百分比;使用jquery在滚动条上显示的宽度,javascript,jquery,width,scrolltop,Javascript,Jquery,Width,Scrolltop,我正在尝试使用jQuery调整滚动条上div的宽度,其想法是每次滚动时,将div的宽度减少scrolltop值的一小部分 例如,假设我有一个宽度为100px的div,如果我从页面顶部向下滚动20px,并且函数声明要减去当前scrolltop值的1/2,则div的宽度将变为90px。嗨,下面是将宽度减少滚动高度10%的代码 var x = 0.5; //define whatever rate you want. $(document).scroll(function() { //whene

我正在尝试使用jQuery调整滚动条上div的宽度,其想法是每次滚动时,将div的宽度减少scrolltop值的一小部分


例如,假设我有一个宽度为100px的div,如果我从页面顶部向下滚动20px,并且函数声明要减去当前scrolltop值的1/2,则div的宽度将变为90px。

嗨,下面是将宽度减少滚动高度10%的代码

 var x = 0.5; //define whatever rate you want.

 $(document).scroll(function() { //whenever a scroll is happening -
    $('#divId').width($('#divId').width()-$(document).scrollTop()*x);

    //capture your div's width and set it to a new width that equals
    //to the subtraction between it's original width and the current 
    //scrolltop (multiplied by half, as you defined). so in your case 
    //if div's width is 100px and scrolltop is 20px, divId's new width
    //will be 100px - (20px * 0.5) = 90px  
});
代码:

$('#myDiv').on('scroll',function(e){
var w= $('#myDiv').scrollTop()*10/100;
$('#myDiv').width($('#myDiv').width()-w);
});
你可以用你想要的任何百分比替换10。
如果您希望对整个文档进行滚动,只需将#mydiv替换为文档,如下所示

这看起来正是我要查找的,但我的div的宽度始终为0,在这个位置上,我将做一个测试。添加对代码作用的解释(以及它如何解决问题)让整个社区更好(不仅仅是个人答案)你说得对!我还是个新手。编辑我的答案!希望现在好多了。