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

我能看到的唯一原因是代码不在dom ready处理程序中

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 ready handler $(function() { .... });中，以确保在执行javascript代码之前已正确加载DOM中的所有元素

$(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，因为jsFiddle已经为您完成了该部分。

如何使用jquery修复div

2 个答案: