javascript - jquery宽度随着滚动而增加/减少

Question

我想在滚动页面时增加和减少 div 的宽度。我可以在向下滚动 150px 后立即增加 div 的宽度，但是当我在编码之前滚动 50px 时，div 宽度不会减小。

增加代码

var scroll_pos = 0;
jQuery(document).scroll(function() {
    scroll_pos = $(this).scrollTop();
    if (scroll_pos > 100) {
        scroll_pos = 100;

    }   
    jQuery(".roadway-sec-1").animate({
        width : (0+1*scroll_pos)+"%"
    });         


}); 

减少代码

jQuery(document).scroll(function() {
    var current=jQuery(".roadway-sec-1").width();
    scroll_pos = $(this).scrollTop();
    if (scroll_pos < 50) {
        scroll_pos = 50;

    }   
    jQuery(".roadway-sec-1").animate({
       width : "-=50"+"%"
    });         


});     

Answer 1

为什么不在一个函数中实现这一点呢？

jQuery(document).scroll(function() {
    scroll_pos = $(this).scrollTop();
    if (scroll_pos < 100 && scroll_pos > 50) {
        jQuery(".roadway-sec-1").animate({
            width : scroll_pos+"%"
        });
    }   
});