如何绑定图像宽度以滚动特定高度？答案

【问题标题】：How to bind image width to scroll for certain height?如何绑定图像宽度以滚动特定高度？
【发布时间】：2015-02-24 22:32:37
【问题描述】：

我只是想将图像附加到滚动中，这样当用户向下滚动时，图像大小/宽度会平滑地减小一定高度，反之亦然。

这样的流畅link

我只想通过流畅的动画将图像的大小从 0px 减小到 700px。

我使用了航点、绑定函数、addclass-remove class、transition (css)等等，但没有成功。

我的航路点代码

jQuery 代码

$('#slide-1-base').waypoint(               // create a waypoint
    function(direction) {
        if (direction === 'down') {
            $('.logo img').stop().animate({ "width" : "80%"}, 1000);
        }
        else {
            $('.logo img').stop().animate({ "width" : "100%"}, 500);
        }
    });

HTML 代码

 <div class="logo">
     <a href="#slide-1">
         <img src="assets/icon/logo.png"/>
     </a>
</div>
<section id="slide-1" ></section>

【问题讨论】：

你有你需要的例子吗？我真的不明白你在问什么。您是否希望图像的大小与滚动高度成比例？像？图像是否始终位于顶部？是固定位置图吗？
@Alexey 是的，图像（徽标）将始终保持在顶部并且它是固定位置。您的宽度逻辑是正确的“orig_size/scroll_height”。但它应该是平滑的，适合大滚动。

标签： jquery css

【解决方案1】：

从你的评论回复来看，这就是你需要的——

$( window ).scroll(function() {
  var scrollAmount = $(document).scrollTop(); // This returns how far away you are from top of your page.
  var picWidth = 100; //Insert any value here for your picture size
  //$('.logo img').css('width', picWidth - (scrollAmount/100));
  $('.logo img').animate({width:(picWidth - (scrollAmount/100))}, 100);
});

这是一个粗略的表示。您需要更改函数的逻辑和数学运算，但这会根据您与页面顶部的距离来调整图像大小。

【讨论】：

我的问题的确切答案。但这并不像我想要的那样顺利。平滑度应该类似于 animation() 函数。
@谢谢它有效。但不平滑$('.logo img').animate({width:(picWidth - (scrollAmount/40))}, 8);

【解决方案2】：

If you want to reduce the size then there is scroll function. check this

http://jsfiddle.net/LLbAu/

【讨论】：

感谢 anusha 回答我的问题。但我不希望这样，因为它不平滑而且它不能用于大高度（我的情况是700px）。 jsfiddle.net/LLbAu/51

【解决方案3】：

看起来你需要这样的东西：fiddle。我认为（根据我从您的 cmets 和之前的答案中看到的）您想要检查用户正在使用的窗口的高度，并根据返回的内容来减少您的特定元素的宽度..

$( window ).scroll(function() {
     if($(window).innerHeight() > 700){
       $('.box').animate({'width': '50'}); 
     }else{
         $('.box').animate({'width': '100'}); 
     }

});

【讨论】：

绝对有效！只需滚动！它只是检查滚动窗口的高度。当它超过 700 时，它会动画！滚动后请耐心等待，并确保窗口高度超过 700px
是的，它正在工作，但它没有绑定到滚动和突然工作。我只想通过流畅的动画将图像的大小从 0 减小到 700。