如果屏幕上显示另一个div，我需要使div淡出。我被告知我需要使用Javascript来执行此操作，以及自动加载。
有谁知道解决方案？
我已经google了，我试图编辑以下内容，但我没有运气实现它。
<script type="text/javascript">
window.onLoad(function () {
if ($('.section5').is(":visible")) {
$(".arrow").fadeOut(fast);
} else if ($('.section5').is(":hidden")) {
$('.arrow').fadeIn(fast);
}
});
</script>
答案 0 :(得分：2)
window.onLoad不是function使用$(function(){...})
而fast是string而不是variable尝试这个，
$(function () {
if ($('.section5').is(":visible")) {
$(".arrow").fadeOut('fast');
} else if ($('.section5').is(":hidden")) {
$('.arrow').fadeIn('fast');
}
});
答案 1 :(得分：0)
如果您正在寻找在向下或向上滚动页面时使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>