2012-10-15 2 views
0

jquery v1.8.2뿐만 아니라 HTML 5를 사용하여 기사 페이지의 끝에 도달하면 항목이 튀어 나오게합니다. 비록 잘 작동하지만, 트리거 가능 ID (#last) 이벤트를 숫자 호출 (픽셀/백분율)로 대체 할 수 있는지 확인하려고합니다.jquery - 숫자 참조로 ID 변경하기

이 코드는 기사 페이지에서 사용하기위한 것입니다. 기사가 끝나면 모달이 나타납니다. 현재는 모달을 나타 내기 위해 id의 높이 (#last)를 찾고 id의 #last를 가진 요소의 높이를 기준으로 터지는 모달을 표시합니다. 내가하려는 것은 : id를 사용하여 이벤트를 트리거하는 대신 숫자 값을 사용하는 것입니다. 예를 들어 페이지가 상단에서 66 % 스크롤되면 팝 아웃 모달 이벤트가 발생합니다.

여기에 코드입니다 :

$(function() { 
$(window).scroll(function(){ 
var distanceTop = $('#last').offset().top - $(window).height(); 
if  ($(window).scrollTop() > distanceTop) 
$('#toolbar-btm-button').fadeIn('slow').animate({bottom: '0'},"slow"); 
else 
$('#toolbar-btm-button').animate({bottom: '-44px'},"fast");     
}); 
}); 

내가 픽셀과 퍼센트 값으로 #last 교체 시도했지만 제대로 작동하지 않았다. 이것이 내가 시도한 것이며 작동하지 않습니다.

$(function() { 
$(window).scroll(function(){ 
var distanceTop = $('66%').offset().top - $(window).height(); 
if  ($(window).scrollTop() > distanceTop) 
$('#toolbar-btm-button').fadeIn('slow').animate({bottom: '0'},"slow"); 
else 
$('#toolbar-btm-button').animate({bottom: '-44px'},"fast");     
}); 
}); 

어떤 조언이 필요합니까? 이 같은

답변

0

시도 뭔가 :

$(function() { 
    $(window).scroll(function() { 
     var distanceTop = $('body').height() - $(window).height(); 
     if ($(window).scrollTop() > (distanceTop * 0.6)) { 
      $('#toolbar-btm-button').fadeIn('slow').animate({ 
       bottom: '0' 
      }, "slow"); 
     } else { 
      $('#toolbar-btm-button').animate({ 
       bottom: '-44px' 
      }, "fast"); 
     } 
    }); 
});​