Question

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

我尝试使用此代码。

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

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

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

<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>

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://lorempixel.com/400/200/sports/1/" alt="" class="logo-white"> 

<img src="http://lorempixel.com/400/200/sports/2/" alt="" class="logo-default">

<div style="height: 2000px;width: 10px;background-color: orange;"></div>

Answer 3

以下是工作示例，只是使用了隐藏显示差异所需的两个元素。

＆＃13;

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

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="logo-white"></div>

<div class="logo-default"></div>

＆＃13;

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://cdn.pixabay.com/photo/2015/02/07/22/31/golden-eagle-627943_960_720.jpg" alt="" class="logo-white">

<img src="https://cdn.pixabay.com/photo/2014/08/12/17/13/white-tailed-eagle-416795_960_720.jpg" alt="" class="logo-default">

Answer 6

CSS：

height: x;
overflow: hidden;

向下滚动时隐藏div

6 个答案: