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

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

1 个答案: