Reputation: 49873
I have 2 divs
:
<div id="div1"></div>
<div id="div2"></div>
I would like to add css({'position':'relative'})
to div2 ONLY when a user scrolls the page and div1 is no longer visible on the page. When div1 is visible again, I want to remove the css rule.
Can anyone help me?
Upvotes: 0
Views: 1106
Reputation: 13986
You could try this code:
$(window).bind('scroll', function() {
if ($(document).scrollTop() >= $('#div1').offset().top - $(window).height()) {
//Change css relative
}else{
}
});
You should play with that until you got a perfect result. Good luck
Upvotes: 2
Reputation: 20241
this is not perfect, but i've written you a quick plugin to take care of this: http://jsfiddle.net/m7ztR/1/
it can be used in two ways:
it gives you a new selector
console.log( $( "#elem" ).is( ":inView" )? "visible":"invisible" );
you can also use this to get all visible elements, e.g.
console.log( $( "p:inView" ).get() );
and something like an event-listener $( "#watchThisElement" ).visibilityChange( function( visible ){ if( visible ){ // do this ... } else{ // do that ... } } );
note: this is not complete for a bunch of reasons!!
it's something i quickly hacked up from similar code i had sitting around.
if the jsfiddle link ever dies, here's the actual code and markup:
html:
<div id="status">look at my background color!</div>
<div id="above">lots of space above ... </div>
<div id="trackMe">i'm being tracked!</div>
<div id="below">lots of space below ... </div>
css:
#status{
position: fixed;
right: 0;
top: 0;
background-color: red;
}
#above, #below{
height: 800px;
background-color: yellow;
}
javascript:
/**
* jquery (in)visibility plugin ...
*/
(function( $ ){
var w = $( window );
// add a custom ":inView" selector
$.expr[':'].inView = function(obj){
var $this = $(obj);
var relY = $this.offset().top - w.scrollTop();
return relY >= 0 && relY <= w.height();
};
$.fn.visibilityChange = function( fun ) {
return this.each(function() {
var elem = $(this);
var pVisible = elem.is( ":inView" );
$( document ).scroll( function( e ){
if( pVisible != elem.is( ":inView" ) ){
pVisible = !pVisible;
fun( pVisible );
}
});
});
};
})( jQuery );
$( "#trackMe" ).visibilityChange( function( visible ){
$( "#status" ).css( "background-color", visible? "green":"red" );
} );
Upvotes: 1
Reputation: 9929
I think you should do some tricks with window.onscroll, the window height and the heigt of div1. As in...do some code in the onscroll method...check for the window height, check for the height of div1, do some calculations on it and check if the div is out of sight...if true...remove the css.
Upvotes: 1