Javascript 如何使用jquery修复div

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>

var elementPosition=$（“#倒计时”）.offset（）；
$（窗口）。滚动（函数（）{
if（$（window.scrollTop（）>elementPosition.top）{
$（'#倒计时'）.css（{'position'：'fixed'，'top'：'0'）；
}否则{
$（'#倒计时'）.css（'position'，'static'）；
}    
});

这段代码正在JSFIDLE上运行，但当我尝试它时，它对我不起作用

---

我试着查看控制台（开发者视图），它指向

elementPosition.top

。但是，

top

是未知属性。有人能帮我吗？

我能看到的唯一原因是代码不在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');
        }
    });
})

---

将代码放入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

已经为您完成了这部分工作。

另请参见