JQuery와에게

Question

HTML을 사용하여 사업부를 해결하는 방법

<div id='countdown'></div> 

jQuery를

<script> 
    var elementPosition = $('#countdown').offset(); 

    $(window).scroll(function(){ 
    if($(window).scrollTop() > elementPosition.top){ 
      $('#countdown').css({'position':'fixed','top':'0'}); 
    } else { 
     $('#countdown').css('position','static'); 
    }  
    }); 
</script> 

이 코드는 JSFiddle에 노력하고 있습니다,하지만 난 그것을 시도 할 때, 나를 위해 작동하지 않았다 .

콘솔 (개발자보기)을 살펴 보았는데 elementPosition.top을 가리키고 있습니다. 그러나 top은 알 수없는 속성입니다. 누군가 이걸로 나를 도울 수 있습니까? 내가 볼 수

Answer 1

유일한 이유는 코드가

jQuery(function() { 
    var elementPosition = $('#countdown').offset(); 

    $(window).scroll(function() { 
     if ($(window).scrollTop() > elementPosition.top) { 
      $('#countdown').css({ 
       'position': 'fixed', 
       'top': '0' 
      }); 
     } else { 
      $('#countdown').css('position', 'static'); 
     } 
    }); 
}) 

Answer 2

는 DOM 안에 당신의 요소를 반드시 모두를 만들기 위해 DOM 준비 처리기 $(function() { .... }); 내부에 코드를 넣어를 DOM 준비 처리기에없는 전에 제대로로드 된 것입니다 jsFiddle 이미 당신을 위해 그 부분을 수행했기 때문에 당신의 자바 스크립트 코드 실행

$(function() { 
    var elementPosition = $('#countdown').offset(); 

    $(window).scroll(function(){ 
     if($(window).scrollTop() > elementPosition.top){ 
      $('#countdown').css({'position':'fixed','top':'0'}); 
     } else { 
      $('#countdown').css('position','static'); 
     }  
    }); 
}); 

코드는 jsFiddle에서 작동합니다.