Question

我试图做一件简单的事情。当我滚动页面时，固定在顶部的图像应该出现，并在顶部滚动时消失。当页面加载它将被隐藏时，我已经以这种方式设置隐藏在img选择器中的可见性。遗憾的是，以下代码无效

这里是jsfiddle http://jsfiddle.net/vhe3rhLd/和jquery函数：

更新

$(window).bind('scroll', function(event) {
  if ($(this).scrollTop() > 100) {
    $('img').fadeTo(1000, 1, function() {
      $(this).css({visibility: 'visible'});
    });
  } else {
    $('img').fadeTo(1000, 0, function() {
      $(this).css({visibility: 'hidden'});
    });
  }
  event.preventDefault();
  });

Answer 1

您使用的函数fadeTo()错误。

fadeTo()的参数是：

fadeTo(duration,opacity,callback)

所以使用它的正确方法如下：

$(window).bind('scroll', function(event) {
  if ($(this).scrollTop() > 100) {
    $('img').fadeTo(500, 1, function() {
      $(this).css({visibility: 'visible'});
    });
  } else {
    $('img').fadeTo(500, 0, function() {
      $(this).css({visibility: 'hidden'});
    });
  }
  event.preventDefault();
  });

此外，在回调中使用不透明度（fadeTo）和可见性可能会带来意外行为，因为您在fadeIn或fadeOut完全执行后设置了de visibility。也许你可以避免使用可见性，只使用不透明度：

    $(window).bind('scroll', function(event) {
      if ($(this).scrollTop() > 100) {
        $('img').fadeTo(500, 1);
      } else {
        $('img').fadeTo(500, 0);
      }
      event.preventDefault();
      });
$('img').hide();//Hide the image at start

我让jsFiddle来展示它。检查它是否符合您的需求。

Answer 2

Js Fiddle

js

$(window).bind('scroll', function(event) {
  if ($(this).scrollTop() > 100) { 
         $('img').fadeIn(600);
      } else {
         $('img').fadeOut(600);
      }
   event.preventDefault();
  });

和css

body {
height: 2800px;
}

img {
position: fixed;
width: 300px;
display:none;

}

Answer 3

http://jsfiddle.net/vhe3rhLd/7/

HTML：

<img class='hidecontent'  src='http://upload.wikimedia.org/wikipedia/commons/a/af/Bonsai_IMG_6426.jpg' />

CSS

body {
height: 2800px;
}

img {
 position: fixed;
width: 300px;


}
.hidecontent{
opacity:0;
z-index:-999;
transition:all 0.5s ease;   
}

.showcontent{
opacity:1;
z-index:999;
transition:all 0.5s ease;   
}

JS

$(window).bind('scroll', function(event) {
 if ($(this).scrollTop() > 100) { 
  $('img').removeClass('hidecontent').addClass('showcontent');
 } else {
  $('img').addClass('hidecontent').removeClass('showcontent');
}
event.preventDefault();
});

Answer 4

在淡出图像之前使图像可见。

$(window).bind('scroll', function(event) {
    if ($(this).scrollTop() > 100) {
        $('img').css({visibility: 'visible'});
        $('img').fadeTo(500, 0, function() {

    });
    } else {
         $('img').fadeTo(0, 500, function() {
         $(this).css({visibility: 'hidden'});
    });
 }
 event.preventDefault();
});

图像在滚动页面时淡入

4 个答案: