동일한 클래스의 모든 요소에 함수 적용

Question

요소가 뷰포트에 있는지 또는 보이는지를 감지하는 간단한 함수가 있습니다. 해당 요소가 표시되면 스크롤 할 때마다 해당 요소를 .css()으로 이동하고 일부 속성을 적용하여 일부 시차 효과를 얻습니다. 확인하는이 요소는 뷰포트에 있으며 이동하면 페이지에서 X 번 반복됩니다. 모든 것이 작동하지만 첫 번째 요소에서만이 문제가 발생하며 다른 모든 요소는 첫 번째 요소에서 최상위 위치를 상속받습니다.

데모 : http://codepen.io/riogrande/pen/RRVVwq (효과를 보려면 아래로 스크롤).

편집 : 일부 사람들은 내가 원하는 것을 잘못 생각했기 때문에 제목 (요소)을 스크롤로 이동하고 싶지만 뷰포트 (보이는 부분)에서만 움직 이길 원합니다. 따라서 동일한 클래스를 가진 첫 번째 요소가 스크롤로 이동하는 경우 스크롤 할 때 더 이상 볼 수 없게 이동하면 안되지만 다른 하나는 움직이는 등 이동해야합니다.

Jquery :

여기

(function($) { 

    'use strict'; 

    $.prototype.isVisible = function() { 
    var rect = this[0].getBoundingClientRect(); 
    return (
     (rect.height > 0 || rect.width > 0) && 
     rect.bottom >= 0 && 
     rect.right >= 0 && 
     rect.top <= (window.innerHeight || document.documentElement.clientHeight) && 
     rect.left <= (window.innerWidth || document.documentElement.clientWidth) 
    ); 
    }; 

    function doCheck() { 
    var elementToDetect = $('.text'); 
    var scrolled = $(window).scrollTop(); 
    if (elementToDetect.isVisible()) { 
     elementToDetect.css('top', (-100 + (scrolled * 0.2)) + 'px'); 
    } 
    } 

    $(document).ready(function() { 
    doCheck(); 
    }); 

    $(window).scroll(function() { 
    doCheck(); 
    }); 

})(jQuery); 

Answer 1

jQuery는 셀렉터와 일치하는 각 요소에 css()과 같은 연산을 적용합니다. 모든 텍스트는 점에서 여전히 문제가

function doCheck() { 
    var elementToDetect = $('.text'); 
    var scrolled = $(window).scrollTop(); 
    for (var index = 0; index < elementToDetect.length; index++) { 
     var element = $(elementToDetect[index]); 
     if (element.isVisible()) { 
     element.css('top', (-100 + (scrolled * 0.2)) + 'px'); 
     } 
    } 
    } 

를 자신의 이미지에 동일한 상위 상대를 유지 :

그래서 당신은 jQuery 오브젝트를 반복하는 경우, 당신이 얻을.

편집 : 는 사실, 난 당신이 무슨 일을하는지 이해 방법은, 당신이보기에 올 때 그들에게 스크롤과 같은 방법으로 모든 이동, 그래서 이미지 위의 각 시작하게 할. 이것은 당신이 필요에 가까운 : 당신이 정말로 텍스트의 위치를 ​​결정하는 부모 div의 위치를 ​​원하기 때문에

function doCheck() { 
    var elementToDetect = $('.text'); 
    for (var index = 0; index < elementToDetect.length; index++) { 
     var text = elementToDetect[index]; 
     var parent = text.parentElement; 
     var parentTop = parent.getBoundingClientRect().top; 
     var scrolled = (window.innerHeight - parentTop); 
     if (scrolled < 0) { 
     scrolled = 0; 
     } 
     if (parentTop < window.innerHeight) { 
     $(text).css('top', (-100 + (scrolled * 0.2)) + 'px'); 
     } 
    } 
    } 

기본적으로, scrollTop()에서 찾고, 잘못된 것입니다.

Answer 2

당신은 스크롤의 각 .text를 확인해야합니다

function doCheck() { 
    var elementToDetect = $('.text'); 
    var scrolled = $(window).scrollTop(); 
    elementToDetect.each(function(i, txtEl) { 
    if (txtEl.isVisible()) { 
     txtEl.css('top', (-100 + (scrolled * 0.2)) + 'px'); 
    } 
    }); 
} 

그리고 당신이 window.scroll에 거기 debouce을 할 가능성이 높습니다 :

을

var timer; 
$(window).scroll(function() { 
    if(timer){ clearTimeout(timer); } 
    timer = setTimeout(function(){ 
     doCheck(); 
    }, 900); 
}); 

Answer 3

$('.text')은 요소 배열을 반환합니다. 당신은 항목의 배열보다는 각 항목에 CSS 변환을 적용해야합니다. 아래의 코드는 원하는 출력을 얻기 위해 업데이트가 필요할 수 있지만 여러분이 가야한다고 생각합니다.

function doCheck() { 
    var scrolled = $(window).scrollTop(); 
    $('.text').each(function() { 
    if($(this).isVisible()) { 
     $(this).css('top', (-100 + (scrolled * 0.2)) + 'px'); 
    } 
    }) 
}