Javascript 向下滚动时隐藏div

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

我用这个密码试过了

//This is the image I just want to show at first
<img src="images/logo-wh.png" alt="" class="logo-white"> 

//This is the image I just want to show when scroll down
<img src="images/logo.png" alt="" class="logo-default">

.logo-default{
  display:none;
}

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

//这是我首先要显示的图像
//这是我只想在向下滚动时显示的图像
.徽标默认设置{
显示：无；
}
$（窗口）。滚动（函数（）{
如果（$（this）.scrollTop（）>0）{
$（'.logo white'）.hide（）；
}否则{
$（'.logo默认值'）.show（）；
}
});

但它没有像我预期的那样工作。有什么建议吗

CSS：

height: x;
overflow: hidden;

---

在

if…else

语句中稍微修改show和hide：

$（窗口）。滚动（函数（）{
如果（$（this）.scrollTop（）>0）{
$（'.logo white'）.hide（）；
$（'.logo默认值'）.show（）；
}否则{
$（'.logo white'）.show（）；
$（'.logo default'）.hide（）；
}
});
.logo默认设置{
显示：无；
}
#包装纸{
高度：1000px；
背景：阿达达；
}
img{
宽度：100px；
}

也许是这样：


$（窗口）。滚动（函数（）{
如果（$（this）.scrollTop（）下面是一个工作示例，
只使用了两个元素，隐藏显示所需的差异


$（窗口）。滚动（函数（）{
如果（$（this）.scrollTop（）>0）{
$（'.logo white'）.hide（）；
$（'.logo默认值'）.show（）；
}否则{
$（'.logo default'）.hide（）；
$（'.logo white'）.show（）；
}
});
$（窗口）.trigger（'scroll'）；
.logo白色，.logo默认值{
宽度：100px；
高度：100px；
背景：#000；
位置：相对位置；
}
.logo默认值{背景：#d20000；}
正文{高度：500px；溢出：滚动；}


删除第二个img标签这里是一个示例代码：


$（窗口）。滚动（函数（）{
如果（$（this）.scrollTop（）>0）{
$（'.logo white'）.hide（）；
$（'.logo默认值'）.show（）；
}否则{
$（'.logo default'）.hide（）；
$（'.logo white'）.show（）；
}
})；
.logo默认设置{
显示：无；
}

您面临的确切问题是什么。它是如何不按预期工作的？您能否解释一下是什么原因导致您编写了“不按预期工作”的代码请？这会有帮助的。我建议不要直接更改元素的style.display属性。只需在body中添加一个类，该类提供类似于“scrolled”或其他内容的滚动状态，并将该类用作css选择器中的容器，如“.scrolled.logo”新的angular框架执行类似于此示例的操作，但它们使用属性变更范围
$("window ").scroll(function(){
if($(window).scrollTop()>0){
$(".logo-white").attr("src","images/logo-wh.png");
}
else{
$(".logo-white").attr("src","images/logo.png");
}
});