липкое меню бросает неперехваченный TypeError: Не удается прочитать свойство 'сверху' неопределенной

Question

я скопировал код формы в этом примере: http://codepen.io/senff/pen/ayGvD

Моих ЯШИ:

$('.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: Невозможно прочитать свойство «верх» неопределенного.

Что я могу сделать, чтобы это сработало?

Большое спасибо заранее.

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