[英]How to show/hide certain div when i have multiple div with same class name
[英]How to hide/show a div when a certain div is in view?
如果屏幕上显示另一个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>
window.onLoad
不是function
使用$(function(){...})
而fast
是一个variable
的string
试试这个,
$(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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.