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

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

最佳答案

在 if...else 语句中稍微修改一下 show 和 hide:

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='wrapper'>
    <img src="http://www.alessandrobianchetti.com/uploads/1/8/5/3/18531856/1842659_orig.jpg" alt="" class="logo-white"> 
    <img src="http://www.pietrarosa.it/wp-content/uploads/2015/01/paesaggi-1.jpg" alt="" class="logo-default">
</div>

关于javascript - 向下滚动时隐藏 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44925334/

上一篇：javascript - 使用 jQuery 中的值将 CSS 应用于标签和输入元素

下一篇：javascript - 为什么 form.submit() 不会触发 "submit"事件？

javascript - jQuery 中的嵌套回调

jquery - 我应该在 jQueryMobile 中使用 jQuery Ajax api 吗？

javascript - 在 onClick() 方法中切换元素的可见性

javascript - 为什么即使使用 onChange 监听器也无法更改 React 中的输入值

javascript - Popper.js:单击外部时如何关闭弹出窗口

javascript - 一个代码多种功能

javascript - fullCalendar动态事件点击行为

javascript - 将所有元素包装在一个元素中，直到出现特定标记

html - 有没有办法让一个元素居中，然后让另一个元素直接在它的右边？