대상 요소가 화면에 표시되는 경우 quasion

Question

저는 Wordpress를 사용하고 있으며 동적 사이드 바가 있습니다. 사이드 바에는 많은 위젯이 있습니다. 내가하려고하는 것은 divis (위젯)을 화면에 표시하는 것입니다 (onload - 페이지가로드 된 후). 다른 위젯은 숨겨집니다 (불투명도 0 또는 그와 비슷한 것). 그러나 스크롤 할 때 (화면에는 보이지 않는) 위젯이 페이드 효과로 나타나길 원합니다.

모든 사이드 바 블록을 숨기는이 코드를 사용하면로드시 opacity=0에 있습니다.

화면에 표시되는 모든 위젯을 항상 표시 한 다음 다른 사람에게 스크롤 할 때 페이드 효과를 적용하는 데 도움이 필요합니다.

$(document).ready(function(){ 
tiles = $("#sidebar1 div").fadeTo(0, 0); 
}); 
$(window).scroll(function(d,h) { 
    tiles.each(function(i) { 
     a = $(this).offset().top + $(this).height(); 
     b = $(window).scrollTop() + $(window).height(); 
     if (a < b) $(this).fadeTo(500,1); 
    }); 
}); 

스크롤 기능이 작동 중입니다. 문제는 페이지가 가득 차있을 때 모든 위젯을 보유하고있는 사이드 바 클래스가 opacity 0 (display : none처럼)에 있다는 것입니다. 필요한 것은 화면에 표시되는 모든 위젯 (예 : 10 개의 위젯 중 2 개)에 페이지가로드 될 때 opacity=1이 표시 될 때입니다. 그러면 사용자가 스크롤 할 때 다른 위젯을 페이드 효과와 함께 다른 것으로 표시합니다.

Answer 1

위젯을 표시 할 수있게 해주는 코드 블록을 추출하여 함수에 넣습니다. 그런 다음 scroll과이 함수를 가리키는 "DOM ready"모두에 처리기를 추가하십시오.

// Determine show or hide 
function showOrHide(){$(document).ready(function(){ 
    $("#sidebar1 div").each(function(i) { 
    var a = $(this).offset().top + $(this).height(); 
    var b = $(window).scrollTop() + $(window).height(); 
    if (a < b) $(this).fadeTo(500,1); 
    }); 
} 

// Assign to both 
$(document).ready(showOrHide); 
$(window).scroll(showOrHide); 

여기에 성능 저하가 있습니다. 일일이 여러 번 스크롤합니다. 이러한 요소에 대해 DOM을 쿼리하고 두 번째로 초 단위로 each을 실행하고 싶지는 않습니다. 이를 위해 검색 할 수 있도록 남겨 둘 것입니다 (SO와 CodeReview에서 자주 묻습니다)