向下滚动时隐藏div

我只想在向下滚动并显示其他图像时隐藏图像。当滚动到页面顶部时，需要显示第一个图像，并且需要隐藏其他图像。向下滚动时隐藏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(); 
    } 
});

但它没有按预期工作。有什么建议么？

来源

2017-07-05 Janath

什么是你面临的确切问题。它如何不按预期工作？ –

您能解释一下发生了什么事情吗？请您写下“未按预期工作”？这将有所帮助。 –

我建议不要直接改变一个元素的style.display属性。只需添加一个类给身体，让你的滚动状态像“滚动”或某些东西，并使用该类作为CSS选择器中的容器像'.scrolled .logo'新的角度框架做类似于这个例子的东西，但他们使用的属性改变范围 –

修改了一下显示和隐藏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>

来源

2017-07-05 11:51:21 Ionut

CSS：

height: x; 
overflow: hidden;

来源

2017-07-05 11:48:05

也许就像这样：

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

来源

2017-07-05 11:53:40 caramba

这里的工作示例，只是使用了两个元素与隐藏显示区别您需要。

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

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

来源

2017-07-05 11:58:08 Ultrazz008

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

删除第二img标签

来源

2017-07-05 12:01:42 Osama

下面是一个示例代码：

$(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">

来源

2017-07-05 12:01:54

向下滚动时隐藏div

回答

相关问题