使用jquery在滚动时从div的宽度减去scrollTop的百分比

时间:2017-03-29 22:18:32

标签: javascript jquery width scrolltop

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

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

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

嗨,这里是将宽度减少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/