隐藏/显示图像滚动

Question

看到那种效果

$(window).scroll(function() {
  if ($(this).scrollTop() > 0){
    $('.a').fadeOut();
  }
  else {
    $('.a').fadeIn();
  }
});

link：http://jsfiddle.net/MFUw3/239/

如何隐藏我的图片并使用滚动显示？

我是初学者。

Answer 1

http://jsfiddle.net/MFUw3/1834/

首先将显示设置为

  

display：none;

在你的CSS中。

然后滚动淡入淡出。

$(window).scroll(function() {
    $('.a').fadeIn();
});

为了更好地优化这一点，我们可以做一些事情。 首先，每次调用$（）;它正在运行一个功能。我们可以通过在滚动函数外定义a来阻止每次滚动时调用此函数。

var a = $('.a');
$(window).scroll(function() {
    a.fadeIn();
});

其次，我们不希望每次滚动时都运行fadeIn（），因为在用户第一次滚动它之后它将是可见的。我们可以做的是取消绑定滚动事件。

var win = $(window);
var a = $('.a');

win.on('scroll', function() {
    a.fadeIn();
    win.off('scroll');
});

http://jsfiddle.net/MFUw3/1835/

Answer 2

改为

$(window).scroll(function() {
  if ($(this).scrollTop() > 0) {
    $('.a').fadeIn();
  }
  else {
    $('.a').fadeOut();
  }
});

并将display:none;设为a。

Fiddle