粘滞菜单抛出未捕获的TypeError：无法读取未定义的属性“top”

Question

我已从此示例复制代码：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>

我的css：

#menu {
    -moz-transition: all 250ms ease-out 0s;
    -webkit-transition: all 250ms ease-out 0s;
    -o-transition: all 250ms ease-out 0s;
    -ms-transition: all 250ms ease-out 0s;
    transition: all 250ms ease-out 0s;
    position: fixed;
    top: 0;
    height: 1200px;
    z-index: 900;
    width: 84px;
    background-color: rgba(17, 17, 17, 0.8);}

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

我该怎么做才能让它发挥作用？

非常感谢提前。

Answer 1

$('.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>

以下是fiddle