How to hide/show a div when a certain div is in view?
Question
I need to make a div fade out if another div is showing on screen. I've been told that I need to use Javascript to do this, as well as making it load automatically.
Does anyone know a solution?
I've googled around, and I've tried to edit the following, but I'm having no luck implementing it.
<script type="text/javascript">
window.onLoad(function () {
if ($('.section5').is(":visible")) {
$(".arrow").fadeOut(fast);
} else if ($('.section5').is(":hidden")) {
$('.arrow').fadeIn(fast);
}
});
</script>
2 answers
solution1
2 2013-10-30 12:18:53
window.onLoad is not a function use $(function(){...})
And fast is a string not variable try this,
$(function () {
if ($('.section5').is(":visible")) {
$(".arrow").fadeOut('fast');
} else if ($('.section5').is(":hidden")) {
$('.arrow').fadeIn('fast');
}
});
solution2
0 ACCPTED 2013-10-30 14:29:57
if you are looking for the solution to make the div show/hide when you scroll down or up the page, and to make it visible when you scroll the page and the other div is not on the page after scroll , here is what you should do:
assume that the div that should be visible on the form while scrolling is like that:
<div id='div1'></div>
and the div that should hide and show accordingly is like that:
<div id='div2'></div>
here is the script you show use:
<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>
just for demo i turn the background red if the div1 is not visible and green if visible
and here is the complete example, please try:
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to show/hide certain div when i have multiple div with same class name
How to hide an element when a certain div is present?
Show or hide div when URL contains certain section of text
Show / Hide Div When each CheckBoxes Value equals a certain amount
How to hide or show a div
how to hide/show siblings div when i click on div
How to show a hidden DIV and auto hide it when other div is opened
How I hide a div when jquery show another div?
How to detect when certain div is out of view
Hide/Show div when click another DIV
Related Tags