창

Question

나는 시차 로딩하려고했다

에 보이는 부분을 확인, 나는 기본 기능을 이해하고 하나의 예를했다. 코드 아래

한 페이지 웹 사이트에 적합합니다. 여기서 내가하는 일은 페이지가 스크롤 될 때 요소의 위치를 ​​바꿀 때입니다. 그러나 나는 페이지가 다른 위치로 스크롤 될 때 페이지에 또 다른 3, 4 섹션이 있다고 가정하고 변경해야하는 해당 부분을 가리킨다.

어떻게 내가 그 부분에 대한 요소를 이동 specifical 할 수 있도록 해당 페이지가 세 번째 섹션으로 스크롤되어 알게 것인가?

$(document).ready(function() 
{ 

    $(window).scroll(function(e){ 
     parallax(); 
    }); 
}); 


function parallax(){ 
    var scrolled = $(window).scrollTop(); 

    console.log('scrolled'+scrolled+' and after multiplay='+scrolled*0.5); 
    $('.group_float').css('top',-(scrolled*0.7)+'px'); 
    var fontSize = parseInt($(".floating_title").css("font-size")); 
    fontSize = fontSize - 1+ "px"; 
    //$("body").css({'font-size':fontSize}); 
    $('.floating_title').css({'font-size':fontSize}); 
} 

좋습니다.

Answer 1

특정 요소가 뷰포트에 표시 또는 not.You는 사용자가 특정로 스크롤되었는지 확인하는 데 사용할 수 있다면 다음 함수는 사실에 기초 true 또는 false를 반환 http://getbootstrap.com/javascript/

$('#myScrollspy').on('activate.bs.scrollspy', function() { 
    // do something… 
}) 

Answer 2

확인 scrollspy 세션

function isOnScreen(e) { 
    var win = $(window); 
    var viewport = { 
     top: win.scrollTop(), 
     left: win.scrollLeft() 
    }; 
    viewport.right = viewport.left + win.width(); 
    viewport.bottom = viewport.top + win.height(); 
    var bounds = e.offset(); 
    bounds.right = bounds.left + e.outerWidth(); 
    bounds.bottom = bounds.top + e.outerHeight(); 
    return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom <       bounds.top || viewport.top > bounds.bottom)); 
    }; 

은 당신의 요구 사항에 따라 세 번째 세션 또는 네 번째 세션의 ID 또는 클래스 이름을 사용하고 요소가 screen.This에있는 경우로 확장 될 수있는 참조 'N'요소

 if (isOnScreen($('.thirdSessionClassName'))) 
       { 
        // YOUR CODE TO CHANGE SESSION // 
       } 
     else if (isOnScreen($('.fourthSessionClassName'))) 
       { 
        // YOUR CODE TO CHANGE SESSION // 
       }