Блог

У меня есть 2 divs :

 <div id="div1"></div>
<div id="div2"></div>
  

Я хотел бы добавить css({'position':'relative'}) в div2 ТОЛЬКО тогда, когда пользователь прокручивает страницу, а div1 больше не отображается на странице. Когда div1 снова станет видимым, я хочу удалить правило css.

Кто-нибудь может мне помочь?

Вы могли бы попробовать этот код:

 $(window).bind('scroll', function() {
if ($(document).scrollTop() >= $('#div1').offset().top - $(window).height()) {
    //Change css relative
}else{

}
});
  

Вы должны играть с этим, пока не получите идеальный результат. Удачи

это не идеально, но я написал вам быстрый плагин, который позаботится об этом: http://jsfiddle.net/m7ztR/1 /

это можно использовать двумя способами:

это дает вам новый селектор
console.log( $( "#elem" ).is( ":inView" )? "visible":"invisible" );

вы также можете использовать это, чтобы получить все видимые элементы, например console.log( $( "p:inView" ).get() );

и что-то вроде прослушивателя событий $( «#watchThisElement» ).visibilityChange( функция ( видимая){ if( visible ){ // сделайте это … } else{ // сделайте это … } } );

примечание: это не завершено по целому ряду причин!!

1. он обрабатывает только вертикальную прокрутку
2. он не обрабатывает фреймы iframes (и может ужасно испортиться при вложенной прокрутке)
3. нет отмены привязки
4. это может замедлиться, если вы просматриваете много элементов
5. не учитывает изменение размера окна

это то, что я быстро взломал из аналогичного кода, который у меня был.

если ссылка jsfiddle когда-либо исчезнет, вот фактический код и разметка:

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 amp;amp; 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" ); 
} );
  

Я думаю, вам следует проделать несколько трюков с window.onscroll, высотой окна и высотой div1. Как in…do некоторый код в методе onscroll … проверяет высоту окна, проверяет высоту div1, выполняет некоторые вычисления над ним и проверяет, находится ли div вне поля зрения … если true … удалите css.