Menu 粘性菜单抛出未捕获的类型错误：无法读取属性'；顶部'；未定义的

我从这个示例中复制了代码：

http://codepen.io/senff/pen/ayGvD

我的js：

$('.menu').addClass('original').clone().insertAfter('.menu').addClass('cloned').css('position','fixed').css('top','0').css('margin-top','0').css('z-index','500').removeClass('original').hide();

scrollIntervalID = setInterval(stickIt, 10);


function stickIt() {

  var orgElementPos = $('.original').offset();
  orgElementTop = orgElementPos.top;               

  if ($(window).scrollTop() >= (orgElementTop)) {
    // scrolled past the original position; now only show the cloned, sticky element.

    // Cloned element should always have same left position and width as original element.     
    orgElement = $('.original');
    coordsOrgElement = orgElement.offset();
    leftOrgElement = coordsOrgElement.left;  
    widthOrgElement = orgElement.css('width');
    $('.cloned').css('left',leftOrgElement+'px').css('top',0).css('width',widthOrgElement).show();
    $('.original').css('visibility','hidden');
  } else {
    // not scrolled past the menu; only show the original menu.
    $('.cloned').hide();
    $('.original').css('visibility','visible');
  }
}

我的html：

<div id="intro-left">
<nav id="menu">
<ul class="navigation"><div class="menu-main-menu-container"><ul id="menu-main-menu" class="menu"><li id="menu-item-4" class="navlink menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-4"><a href="#home">HOME</a></li>
<li id="menu-item-8" class="navlink menu-item menu-item-type-custom menu-item-object-custom menu-item-8"><a href="#produkty">PRODUKTY</a></li>
<li id="menu-item-7" class="navlink menu-item menu-item-type-custom menu-item-object-custom menu-item-7"><a href="#realizacje">REALIZACJE</a></li>
<li id="menu-item-6" class="navlink menu-item menu-item-type-custom menu-item-object-custom menu-item-6"><a href="#onas">ONAS</a></li>
<li id="menu-item-5" class="navlink menu-item menu-item-type-custom menu-item-object-custom menu-item-5"><a href="#contact">KONTAKT</a></li>
</ul></div></ul></nav></div>

问题是它抛出错误：UncaughtTypeError:无法读取未定义的属性“top”

我能做些什么使它工作

非常感谢

$（'.menu'）

必须更改为

$（'#menu'）

并且，确保在加载DOM之后加载脚本。因此，请将其保存在domReady事件中：

$(document).ready(function(){
 // keep your script here..    
});

或

我认为我们可以通过简单的方式实现同样的目标：

       <div>
            jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML.[2] jQuery is the most popular JavaScript library in use today, with installation on 65% of the top 10 million highest-trafficked sites on the Web.[3][4][5] jQuery is free, open-source software licensed under the MIT License.[1]


     </div>
    <div class="header-menu">Home | About Us | Contact Us | Careers</div>

    <div class="content">
        Some here body content here

    </div>

<style>
    .header-menu {
        background-color:blue;
        color:white;
        font-size:24px;
    }
    .header-menu.stick{
        position:fixed;
        top:0px;
        left:0px;
        right:0px;
    }
    .content{
        height:600px;
    }
</style>
    <script>
    $(document).ready(function(){
    $(window).scroll(function(){
      var scrollDone = $(window).scrollTop();
      var headerMenu = $('.header-menu');
        console.log()
      if(scrollDone >= 100){ // You can give how much amount you want;
        headerMenu.addClass('stick');
      }else{
       headerMenu.removeClass('stick');
      }
    });
    })
</script>

jQuery是一个跨平台的JavaScript库，旨在简化HTML的客户端脚本。[2]jQuery是目前使用的最流行的JavaScript库，安装在网络上流量最高的1000万个站点中的65%。[3][4][5]jQuery是根据麻省理工学院许可证授权的免费开源软件。[1]
主页|关于我们|联系我们|职业
这里有一些身体内容
.标题菜单{
背景颜色：蓝色；
颜色：白色；
字体大小：24px；
}
.header-menu.stick{
位置：固定；
顶部：0px；
左：0px；
右：0px；
}
.内容{
高度：600px；
}
$（文档）.ready（函数（）{
$（窗口）。滚动（函数（）{
var scrollDone=$（window.scrollTop（）；
var headerMenu=$（'.header菜单'）；
console.log（）
如果（scrollDone>=100）{//你可以给出你想要多少；
headerMenu.addClass（'stick'）；
}否则{
headerMenu.removeClass（“棍子”）；
}
});
})

---

这是

我添加的文档准备就绪，它使菜单消失。我没有收到任何错误。这是z索引问题吗？我通过使用不同的代码并将绝对位置替换为intr left标记中的固定位置，成功地使其工作。

       <div>
            jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML.[2] jQuery is the most popular JavaScript library in use today, with installation on 65% of the top 10 million highest-trafficked sites on the Web.[3][4][5] jQuery is free, open-source software licensed under the MIT License.[1]


     </div>
    <div class="header-menu">Home | About Us | Contact Us | Careers</div>

    <div class="content">
        Some here body content here

    </div>

<style>
    .header-menu {
        background-color:blue;
        color:white;
        font-size:24px;
    }
    .header-menu.stick{
        position:fixed;
        top:0px;
        left:0px;
        right:0px;
    }
    .content{
        height:600px;
    }
</style>
    <script>
    $(document).ready(function(){
    $(window).scroll(function(){
      var scrollDone = $(window).scrollTop();
      var headerMenu = $('.header-menu');
        console.log()
      if(scrollDone >= 100){ // You can give how much amount you want;
        headerMenu.addClass('stick');
      }else{
       headerMenu.removeClass('stick');
      }
    });
    })
</script>