向下滚动时隐藏div

我只想在向下滚动时隐藏图像并显示另一个图像。 滚动到页面顶部时，需要显示第一个图像，并且需要隐藏其他图像。

我试过这个代码。

//This is the image I just want to show at first  //This is the image I just want to show when scroll down  .logo-default{ display:none; } $(window).scroll(function() { if ($(this).scrollTop() > 0) { $('.logo-white').hide(); } else { $('.logo-default').show(); } }); 

但它并没有像我预期的那样发挥作用。 有什么建议？

Answer 1

修改一下show并隐藏在if...else语句中：

 $(window).scroll(function() { if ($(this).scrollTop() > 0) { $('.logo-white').hide(); $('.logo-default').show(); } else { $('.logo-white').show(); $('.logo-default').hide(); } }); 

 .logo-default { display: none; } #wrapper{ height: 1000px; background: #adadad; } img{ width: 100px; } 

Answer 2

也许是这样的：

 $(window).scroll(function() { if ($(this).scrollTop() <= 0) { $('.logo-default').hide(); $('.logo-white').show(); } else { $('.logo-default').show(); $('.logo-white').hide(); } }); 

 .logo-white, .logo-default { position: fixed; top: 0px; } .logo-default{ display:none; } 

Answer 3

这是一个有效的例子，只是使用了两个元素和你需要的隐藏显示差异。

 $(window).scroll(function() { if ($(this).scrollTop() > 0) { $('.logo-white').hide(); $('.logo-default').show(); } else { $('.logo-default').hide(); $('.logo-white').show(); } }); $(window).trigger('scroll'); 

 .logo-white, .logo-default { width: 100px; height: 100px; background: #000; position: relative; } .logo-default { background: #d20000; } body { height: 500px; overflow: scroll; } 

Answer 4

 $("window ").scroll(function(){ if($(window).scrollTop()>0){ $(".logo-white").attr("src","images/logo-wh.png"); } else{ $(".logo-white").attr("src","images/logo.png"); } }); 

删除第二个img标记

Answer 5

这是一个示例代码：

 $(window).scroll(function() { if ($(this).scrollTop() > 0) { $('.logo-white').hide(); $('.logo-default').show(); } else { $('.logo-default').hide(); $('.logo-white').show(); } }); 

 .logo-default { display: none; } 

Answer 6

CSS：

 height: x; overflow: hidden;