Jquery removeClass - 섹션 내 addClass

Question

div와 (#element) 요소가 있습니다. 요소는 원점에서 보이지 않습니다. my-div이 화면에 표시되면 요소가 표시되고 위 또는 아래를 떠날 때 요소가 다시 보이지 않게됩니다.

필자는 스크립트를 사용하고 처음으로 my-div까지 스크롤 할 때 작동하지만 아래쪽으로 스크롤하거나 위쪽을 스크롤하면 요소가 계속 표시되어 더 이상의 애니메이션이 발생하지 않습니다.

전이를 위해 CSS를 사용합니다.

html로 :

<section> 
    <div id="whatever">It is just a DIV</div> 
    <div id="my-div">My DIV  
     <div id="element" class="invisible">The element</div> 
    </div> 
</section> 

CSS의 :

section { 
    width:100%; 
    min-height: 4000px; 
    text-align: center; 
    background-color: #e0e0e0; 
} 
#whatever { 
    width: 80%; 
    height: 500px; 
    margin: 10%; 
    background-color: #d0d0d0; 
} 
#my-div {width: 80%; 
    height: 300px; 
    margin: 10%; 
    background-color: grey; 
} 
#element { 
    width: 80%; 
    height: 100px; 
    background-color: red; 
    -webkit-transition: all 1500ms cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */ 
    -webkit-transition: all 1500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); 
    -moz-transition: all 1500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); 
    -ms-transition: all 1500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); 
    -o-transition: all 1500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); 
    transition: all 1500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */ 
} 
.invisible { 
    opacity: 0; 
} 
.visible { 
    opacity: 1; 
} 

JQuery와 스크립트 :

$(window).scroll(function(){    
    if ($(window).scrollTop() <= $('#my-div').offset().top) { 
     $('#element').removeClass('invisible').addclass('visible'); 
    } 
    if ($(window).scrollTop() > $('#my-div').offset().bottom) { 
     $('#element').removeClass('invisible').addclass('visible'); 
    } 
    else { 
     $('#element').removeClass('visible').addclass('invisible'); 
    } 
}); 

바이올린 라이브를 볼 수 : http://jsfiddle.net/igorlaszlo/u0tzu02b/

Answer 1

첫째을, 그녀의 e는 fiddle입니다.

내가하고있는 수표를 다시 작성했습니다. div가 화면에 있는지 여부를 결정하기 위해 함수를 사용했습니다 (나는 here에서 가져 왔습니다). 당신이 꺼리지 않기를 바랍니다.

$(window).scroll(function() { 
    if (isScrolledIntoView('#element')) { 
     $('#element').removeClass('invisible').addClass('visible'); 
    } else { 
     $('#element').removeClass('visible').addClass('invisible'); 
    } 
}); 

function isScrolledIntoView(elem) { 
    var docViewTop = $(window).scrollTop(); 
    var docViewBottom = docViewTop + $(window).height(); 

    var elemTop = $(elem).offset().top; 
    var elemBottom = elemTop + $(elem).height(); 

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); 
}