在滚动页面上淡出 - 背景 div

Question

从未使用过jquery，我试图在滚动时让我的背景图像淡出。

我尝试使用不同的jquery代码，似乎没有任何效果。

目录

<div id="background" class="background-div">
<div id="myDropdown" class="dropdown">
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="contact-php.html">Contact</a>
</div>
<div class="contact-title">
<h2>Get in touch with us</h2>
</div>

.CSS

.background-div{
background: url('../pics/pic-12.jpg')no-repeat 75%;
top: 0;
right:0;
left:0;
width:100%;
height:500px;
}

JS/Jquery

/在滚动时淡出/

$(window).scroll(function() {
if ($(this).scrollTop() > 250) {
if ($(this).scrollTop() > 1250)
$('#background').stop().fadeOut();
else
$('#background').stop().fadeIn();
}
});

滚动页面上没有显示淡出的错误消息。

Answer 1

这应该有效：

$(window).scroll(function() {
if ($(window).scrollTop() > 250)
$('#background').stop().fadeOut();
else
$('#background').stop().fadeIn();
});

Answer 2

我希望这对你有用。

$(window).scroll(function() {
if ($(window).scrollTop() > 250) {
$("#background").stop().fadeOut();
} else {
$("#background").stop().fadeIn();
}
});

.background-div {
background: url("https://d2gg9evh47fn9z.cloudfront.net/800px_COLOURBOX25806764.jpg")no-repeat
75%;
top: 0;
right: 0;
left: 0;
width: 100%;
height: 500px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="height:200vh">
<div id="background" class="background-div">
<div id="myDropdown" class="dropdown">
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="contact-php.html">Contact</a>
</div>
<div class="contact-title">
<h2>Get in touch with us</h2>
</div>
</div>