如果屏幕上显示另一个 div，我需要让一个 div 淡出。有人告诉我，我需要使用 Javascript 来执行此操作，并使其自动加载。
有谁知道解决方案？
我已经用谷歌搜索了，我试图编辑以下内容，但我没有运气实现它。
<script type="text/javascript">
window.onLoad(function () {
if ($('.section5').is(":visible")) {
$(".arrow").fadeOut(fast);
} else if ($('.section5').is(":hidden")) {
$('.arrow').fadeIn(fast);
}
});
</script>
window.onLoad不是一个function用途$(function(){...})
而且fast是一个string不variable试试这个，
$(function () {
if ($('.section5').is(":visible")) {
$(".arrow").fadeOut('fast');
} else if ($('.section5').is(":hidden")) {
$('.arrow').fadeIn('fast');
}
});
如果您正在寻找解决方案以在向下或向上滚动页面时使 div 显示/隐藏，并在滚动页面时使其可见并且滚动后另一个 div 不在页面上，这就是您应该做的做：
假设滚动时应该在表单上可见的 div 是这样的：
<div id='div1'></div>
并且应该相应地隐藏和显示的 div 是这样的：
<div id='div2'></div>
这是您显示使用的脚本：
<script type="text/javascript">
$(document).ready(function () {
AdjustDiv();
$(window).scroll(function () {
AdjustDiv();
})
});
function AdjustDiv() {
var windowheight = window.innerHeight;
var div1height = $('#div1').height();
var scroll_top = $(window).scrollTop();
var div1top = $('#div1').offset().top;
var window_bottom = scroll_top + windowheight;
var div1_bottom = div1top + div1height;
if
(
(
(scroll_top >= div1top)
&&
(scroll_top < div1_bottom)
)
||
(
(scroll_top <= div1top)
&&
(window_bottom >= div1_bottom)
)
||
(
(scroll_top <= div1top)
&&
(window_bottom > div1top)
)
) {
$('body').css('background-color', 'green');
}
else {
$('body').css('background-color', 'red');
}
}
</script>
仅用于演示，如果 div1 不可见，我将背景变为红色，如果可见，则变为绿色
这是完整的示例，请尝试：
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
</head>
<body>
<div id='div0' style='border: solid 1px black;'>
<p>
aadsa dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas da2121212121s dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
</div>
<div id='div1' style='border: solid 1px black;'>
<h1>
DIV 1</h1>
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
</div>
<div id='div3' style='border: solid 1px black;'>
<p>
aadsa dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas da2121212121s dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
</div>
<div id='div4' style='border: solid 1px black;'>
<p>
aadsa dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas da2121212121s dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
</div>
<div id='div2' style='border: solid 1px black;'>
div 2<br />
div 2<br />
div 2<br />
div 2<br />
</div>
<script type="text/javascript">
$(document).ready(function () {
AdjustDiv();
$(window).scroll(function () {
AdjustDiv();
})
});
function AdjustDiv() {
var windowheight = window.innerHeight;
var div1height = $('#div1').height();
var scroll_top = $(window).scrollTop();
var div1top = $('#div1').offset().top;
var window_bottom = scroll_top + windowheight;
var div1_bottom = div1top + div1height;
if
(
(
(scroll_top >= div1top)
&&
(scroll_top < div1_bottom)
)
||
(
(scroll_top <= div1top)
&&
(window_bottom >= div1_bottom)
)
||
(
(scroll_top <= div1top)
&&
(window_bottom > div1top)
)
) {
$('body').css('background-color', 'green');
}
else {
$('body').css('background-color', 'red');
}
}
</script>
</body>
</html>