用jquery从div的宽度中减去scrollTop的百分比答案

【问题标题】：Subtract percentage of scrollTop from div's width on scroll with jquery用jquery从div的宽度中减去scrollTop的百分比
【发布时间】：2017-03-29 22:18:31
【问题描述】：

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

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

【问题讨论】：

标签： javascript jquery width scrolltop

【解决方案1】：

您好，这里是将宽度减少 10% 滚动高度的代码https://jsfiddle.net/x3o439kt/

代码：

$('#myDiv').on('scroll',function(e){
var w= $('#myDiv').scrollTop()*10/100;
$('#myDiv').width($('#myDiv').width()-w);
});

您可以将 10 替换为您想要的任何百分比。如果您希望对整个文档进行滚动，只需将#mydiv 替换为文档，如https://jsfiddle.net/x3o439kt/3/

【讨论】：

【解决方案2】：

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

【讨论】：

这看起来正是我正在寻找的东西，但我的 div 的宽度总是 0 ，我将制作一个小提琴来测试。
为代码的作用（以及它如何解决问题）添加解释有助于整个社区（不仅仅是个人答案）
你是对的！我对stackoverflow还是很陌生。编辑了我的答案！希望现在好多了。