Question

我只是想附加图像以便滚动，这样当用户向下滚动图像大小/宽度时，可以平滑地减少并滚动一定高度或反之亦然。

像link
这样的平滑度
我只想通过平滑动画将图像尺寸从0px缩小到700px。

我使用了 航点，绑定函数，addclass-删除类，转换（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>

Answer 1

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

http://jsfiddle.net/LLbAu/

Answer 2

从您的评论回复来看，这就是您所需要的 -

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

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

Answer 3

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

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

});

如何绑定图像宽度滚动一定高度？

3 个答案: