如何使用 jquery 修复 div [重复]答案

【问题标题】：how to fix a div using jquery [duplicate]如何使用 jquery 修复 div [重复]
【发布时间】：2014-02-25 18:18:29
【问题描述】：

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 是未知属性。有人可以帮我解决这个问题吗？

【问题讨论】：

另见Why does jQuery or a DOM method such as getElementById not find the element?

标签： javascript jquery html css

【解决方案1】：

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

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');
        }
    });
})

【讨论】：

【解决方案2】：

将您的代码放入 DOM 就绪处理程序 $(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 已经为您完成了该部分。

【讨论】：